多个鼠标输入/Mouseleave事件在重叠div上触发
因此，我有一个#container div的简单设置，其中包含一个#field div。我还有一个不可见的#悬停范围，它跟随鼠标移动（居中）并在#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）事件。这似乎是因为#悬停范围以鼠标为中心，每次移动鼠标时，我都会离开#字段并输入#悬停，然后离开#悬停并反复输入#字段，导致#悬停不断显示和隐藏。
我有一个解决方案，就是不要将#悬停在鼠标的中心，这样鼠标就不会触及跨距的边界，也就不会离开#字段。但我想让它居中^^
另一种方法是给跨度一个负的z索引，这不是真正的解决方案，因为#悬停在#字段后面，一旦它得到bgcolor。
JSFiddle解决问题（#以鼠标为中心时悬停“闪烁”）
这里的正确方法是什么：）？
共有2个答案
我有一个解决方案，就是不要将#悬停在鼠标的中心，这样鼠标就不会触及跨距的边界，也就不会离开#字段。
在现代浏览器中，通过使用指针事件使鼠标光标“不可触及”，可以轻松实现这一点：
#mouseHover {
pointer-events: none;
}
https://jsfiddle.net/6rauo9ba/3/
当然，这只是一个解决方案，如果您不需要以任何方式与#mouseHover元素中的内容进行交互。
您可能需要检查浏览器支持，看看哪些旧浏览器需要回退解决方案。http://caniuse.com/#feat=pointer-事件
尝试将鼠标悬停元素a的指针事件设置为“none”。这里是一个更新的JSFIDLE。
#mouseHover {
// ...
pointer-events: none;
}
-
我正在构建一个Java应用程序。这个应用程序是一个典型的“油漆”应用程序，你可以选择一种颜色，并在画布上绘制。除了...我将有一个圆圈数组分布在画布的顶部。我希望这些圆立即改变颜色，如果，当用户正在绘制和鼠标得到圆的X(10)个像素（其中X是绘制的线的宽度除以2）。 这是我的密码。我有一张画布是一组的一部分。我还创建了一个圆圈节点，并将其作为组的一部分。我想我需要以某种方式创建一个鼠标事件，当用户
-
我尝试了几乎所有的方法，但是鼠标拖动事件没有触发，就像这里解释的那样： https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/input/MouseDragEvent.html 下面是一个简单的示例，您可以尝试一下（我在JavaFX11.0.2中使用Java11）： 我想通过在或中获取的引用。有许多嵌套窗格等，因为我想保持原来的项目布
-
我有一个SVG，里面有更多SVG，其中包含数量可变的rect元素，所有这些都是从数据对象生成的。以下是一般层次结构： 我已将mouseenter/mouseleave事件绑定到
-
问题内容： 当我将鼠标悬停在DIV上时，它将触发将鼠标悬停在父DIV上，这对我来说似乎是错误的。我只希望“突出显示”效果在子DIV 上起作用。 问题答案： 根据定义，将鼠标悬停在孩子上，也将鼠标悬停在父母上。html事件中没有“阻止”。 有两个方法链，气泡和捕获。 W3C事件模型中发生的任何事件都首先被捕获，直到到达目标元素，然后再次冒泡。 http://www.quirksmode.org/js
-
问题内容： 我正在使用与鼠标移动事件一起操作的YUI滑块。我想让它响应touchmove事件（iPhone和Android）。发生touchmove事件时如何产生鼠标移动事件？我希望仅在顶部添加一些脚本，即可将touchmove事件映射到鼠标移动事件，而无需使用滑块进行任何更改。 问题答案： 我确定这是您想要的： 我已经捕获了触摸事件，然后手动触发了自己的鼠标事件以进行匹配。尽管该代码并不是特别通
-
我使用形状和画布，我想做一些像地图编辑器的东西。当鼠标在画布上移动时，我会在每次移动时将实际选定的对象绘制到画布上的鼠标位置，以便使用该程序的用户可以看到该对象放置在画布上时的外观。 单击鼠标，我将当前对象/位置添加到列表中，其中包含每次更新都需要在画布上绘制的放置元素。 问题是，如果鼠标移动处理程序处于活动状态（绑定到画布），那么click事件不会一直触发，我需要连续单击大约十次来放置元素。如果