mouseenter跨浏览器

mouseenter跨浏览器

by kixi

HTML

<div id="dd" style="background-color:#369;width:50%;height:50%;position:absolute;left:25%;top:25%;">
    <div id='kixi' style="background-color:#ff0;width:50%;height:50%;position:relative;left:25%;top:25%">
        <div style="background-color:#789;width:50%;height:50%;position:relative;left:25%;top:25%">
            <div style="background-color:#123;width:50%;height:50%;position:relative;left:25%;top:25%">
                <div style="background-color:#456;width:50%;height:50%;position:relative;left:25%;top:25%"></div>
            </div>
        </div>
    </div>
</div>

CSS

/*
清晰网
kixi.com.cn
从javascript开始
*/

JavaScript

var dd = document.getElementById('kixi')

if (!+'\v1') { //ie
    dd.onmouseenter = function () {
        alert(1);
    };
    dd.onmouseleave = function () {
        alert(2);
    };
} else { //others
    dd.onmouseover = function (e) {
        var t = e.relatedTarget;　　　　
        if (!t || (!(t.compareDocumentPosition(this) & 8) && t !== this)) {

            // t有可能是不存在的, target在很边缘的情况下，从浏览器外部直接移入target
            alert('mouseenter')　　　　
        }

    };
    dd.onmouseout = function (e) {
        var t = e.relatedTarget;　　　　
        if (!t || (!(t.compareDocumentPosition(this) & 8) && t !== this)) {

            // t有可能是不存在的, target在很边缘的情况下，从浏览器外部直接移入target
            alert('mouseleave')　　　　
        }

    };
}