在重疊的div上觸發了多個mouseenter / mouseleave事件

Question

所以我有一個#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-索引，這不是真正的解決方案，因為#hover一旦獲得bgcolor就會消失在#field后面。

JSFiddle問題（#hover在以鼠標為中心時“閃爍”）

這里有什么正確的方法:)？

Answer 1

嘗試為#mouseHover元素指定一個pointer-events CSS屬性值'none'。 這是一個更新的JSFiddle 。

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

Answer 2

我的一個解決方案是不將#hover放在鼠標周圍，因此鼠標不會觸及范圍的邊界，因此不會離開#field。

通過使用pointer-events使鼠標光標“不可觸及”，您可以輕松地在現代瀏覽器中實現這一點：

#mouseHover {
    pointer-events: none;
}

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

如果您不需要以任何方式與#mouseHover元素內的內容進行交互，那當然只是一個解決方案。

您可能需要檢查瀏覽器支持，以查看可能需要回退解決方案的舊版瀏覽器。 http://caniuse.com/#feat=pointer-events

在重疊的div上觸發了多個mouseenter / mouseleave事件

問題描述

2 個解決方案

解決方案1
4 已采納 2015-08-15 12:56:26

解決方案2
0 2015-08-15 12:59:38

在重疊的div上觸發了多個mouseenter / mouseleave事件

問題描述

2 個解決方案

解決方案1 4 已采納 2015-08-15 12:56:26

解決方案2 0 2015-08-15 12:59:38

解決方案1
4 已采納 2015-08-15 12:56:26

解決方案2
0 2015-08-15 12:59:38