javascript - 如何模拟旧浏览器的mouseenter和mouseleave DOM事件？

用div制作窗口并使用mouseover-mouseout具有一个已知问题：如果内部有子div，则将触发mouseout。最近由mouseenter和mouseleave解决了此问题，因为除非鼠标指针离开根div（真实窗口），否则它不会触发。不幸的是，有许多浏览器无法识别这些新事件，如this article所示。：

火狐7
铬14
Safari 5.1

我认为可能将事件冒泡处理与mouseover和mouseout结合使用以产生所需的效果。可能吗？还有另一种（更好）的方法吗？还是做不到？

观察：在此项目中未使用jQuery。

编辑：我的测试代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mouse Events Tester</title>
<script>
var inside = function(e){
    console.log("I am inside!");
}

var outside = function(e){
    if(e.target !== this) console.log("Now outside...");
}

function targetOnly(handler) {
    return function (e) {
        if (e.target === this)
            return handler.apply(this, arguments);
        return;
    };
}

function ini(){
    document.getElementById("win").addEventListener("mouseover", inside, false);
    document.getElementById("win").addEventListener("mouseout", outside, false);
}


</script>
</head>

<body onload="ini();">
<div id="win" style="border:#000 solid 2px; background-color:#999;">
    <p>Window</p>
    <div id="anything" style="border:#000 dashed 1px; background-color:#CCC;">
    <p>An object inside the window</p>
    </div>
</div>
</body>
</html>

最佳答案

我花了一个小时的时间，得出了以下代码：

Element.prototype.childOf = function(p){var c=this;while((c=c.parentNode)&&c!==p);return !!c};

el = document.getElementById('your-element-id');

el.onmouseover = function(e) {
    if (e.target == e.currentTarget && !e.fromElement.childOf(e.currentTarget) && !e.toElement.childOf(e.currentTarget)) {
        // you are in
    }
}

el.onmouseout = function(e) {
    if (e.target == e.currentTarget && !e.fromElement.childOf(e.currentTarget) && !e.toElement.childOf(e.currentTarget)) {
        // you are out
    }
}

关于javascript - 如何模拟旧浏览器的mouseenter和mouseleave DOM事件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25087450/