在重叠 div 上触发多个 mouseenter / mouseleave 事件答案

【问题标题】：Multiple mouseenter / mouseleave events fired on overlapping divs在重叠 div 上触发多个 mouseenter / mouseleave 事件
【发布时间】：2015-08-15 12:50:16
【问题描述】：

所以我有一个简单的#container div 设置，其中包含一个#field div。我还有一个不可见的#hover 跨度，它跟随鼠标移动（居中）并在悬停在#field 上时变得可见。

HTML：

<body>
        <div id="container" >
            <div id="field"></div>
        </div>
        <span id="mouseHover" ></span>
</body>

JS：

 $("#field").on({
    mousemove: function (e) {
        var left = parseInt($("#container").css("left")) || 0;
        var top = parseInt($("#container").css("top")) || 0;
        var newX = e.pageX - left - parseInt($("#mouseHover").css("width")) / 2;
        var newY = e.pageY - top - parseInt($("#mouseHover").css("height")) / 2;
        $("#mouseHover").css({ left: newX, top: newY });
       console.log("MMove");
    },
    mouseenter: function(e){
        $("#mouseHover").show();
        console.log("MEnter");
    },
    mouseleave: function(e){
        $("#mouseHover").hide();;
        console.log("MLeave");
    }
});

当悬停在字段上时，只要我移动鼠标，它就会触发无数 mouseenter 和 mouseleave（+ 预期的 mousemove）事件。似乎是这种情况，因为#hover 跨度以鼠标为中心，每次我移动鼠标时，我在技术上离开#field 并输入#hover，然后离开#hover 并一次又一次地输入#field，导致#hover连续显示和隐藏。

我有一个解决方案是不将#hover 围绕鼠标居中，因此鼠标不会触及跨度的边界，因此不会离开#field。但我希望它居中^^

另一个是给跨度一个负的z-index，这不是真正的解决方案，因为#hover一旦获得bgcolor就会消失在#field后面。

JSFiddle with the problem (#hover is "flashing" when centered around mouse)

这里的正确方法是什么:)？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

尝试将#mouseHover 元素的pointer-events CSS property 值设为“无”。这是updated JSFiddle。

#mouseHover { 
    // ...
    pointer-events: none;
}

【讨论】：

（加 1）确实是一个很好的答案。我刚刚从你那里学到了一项新技术。干得好。
这实际上是我搜索的内容，一种禁用元素上所有鼠标事件的方法。为什么我没找到^^ 非常感谢！！！这似乎不是一种非常常见的方式（参见上面的 rajaprabhu），否则将如何处理，或者没有人这样做？
只要你不需要支持#mouseHover中进行鼠标交互，没有理由不使用这种方法。
查看@CBroe 的答案以了解如何操作。基本上，您需要以您的风格实现该功能。如果您担心浏览器支持（为什么，今天使用的大多数浏览器实际上都支持它），您可以考虑将您的处理程序包装在此：if(e.target === this[0]){ /* rest of your handler code here */ }

【解决方案2】：

我有一个解决方案是不将#hover 围绕鼠标居中，因此鼠标不会触及跨度的边界，因此不会离开#field。

您可以在现代浏览器中轻松实现这一目标，只需使用pointer-events 使其鼠标光标“无法触及”：

#mouseHover {
    pointer-events: none;
}

https://jsfiddle.net/6rauo9ba/3/

这当然只是一个解决方案，如果您不需要以任何方式与 #mouseHover 元素内的内容进行交互。

您可能需要检查浏览器支持，以了解您可能需要针对哪些旧浏览器提供后备解决方案。 http://caniuse.com/#feat=pointer-events

【讨论】：