在重叠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事件

回答

相关问题