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

所以我有一個#container div的簡單設置，它包含一個#field div。我也有一個看不見的#hover跨度，跟隨鼠標移動（居中），並在#field上懸停時變得可見。在重疊div上觸發多個mouseenter/mouseleave事件

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和鼠標離開（+意鼠標移動）事件。這似乎是這種情況，因爲#hover跨度集中在鼠標周圍，每當我移動鼠標時，我在技術上離開#field並輸入#hover，然後離開#hover並再次輸入#field，導致#hover不斷地顯示和隱藏。

我的一個解決方案是不圍繞鼠標#hover，因此鼠標不會觸及跨度的邊界，因此不會離開#field。但我希望它居中^^

另一個是給跨度一個負Z指數，這是沒有真正的解決方案，因爲#hover消失在#field後面，只要它得到一個bgcolor。

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

什麼會在這裏是正確的做法:)？

來源

2015-08-15 ch40s

嘗試給出#mouseHover元素的一個pointer-events CSS property值'none'。這是一個updated JSFiddle。

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

來源

2015-08-15 12:56:26 sdgluck

（加1）真的是一個很好的答案。我剛剛從你身上學到了一種新技術。做得好。 –

這實際上是我搜索的，一種禁用元素上的所有鼠標事件的方法。爲什麼我沒有找到那個^^非常感謝！這似乎不是一個非常常見的方式（看上面的rajaprabhu），這個怎麼處理呢，還是沒有人這樣做？ – ch40s

只要您不需要支持 sdgluck

一種解決方案，我有是不圍繞着鼠標#hover，所以鼠標不接觸跨度的範圍，因此不離開#field。

那一個，你可以很容易地實現在現代瀏覽器，通過使用pointer-events使「賤民」通過鼠標光標：

#mouseHover { 
    pointer-events: none; 
}

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

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

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

來源

2015-08-15 12:59:38 CBroe

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

回答

相關問題