我在 JS 中有这两个关于 mouseover 和 mouseout 事件。它们用于检查我是否将鼠标悬停在我页面上的面板上。但问题是当我将鼠标悬停在面板上时它会触发(好),但是当我将鼠标悬停在该面板内的另一个元素上时它会触发 mouseout 事件,然后当我移动到面板内的另一个部分时再次触发 mouseover 事件。
我只希望 mouseover 和 mouseout 事件触发一次!一次用于进入面板,另一次用于离开面板。有没有办法将鼠标悬停调用传播到 div.panel 中的所有子元素。看起来这会纠正它。
这是我的事件
$(document).off("mouseover").on("mouseover", "div.panel", function() {
var panelSpaceId = $(this).attr("data-spaceId");
var marker = _.find(scope.markers, function(item) {
return item.spaceId == panelSpaceId
})
google.maps.event.trigger(marker, "mouseover");
console.log("over" + marker.spaceId);
});
$(document).off("mouseout").on("mouseout", "div.panel", function() {
var panelSpaceId = $(this).attr("data-spaceId");
var marker = _.find(scope.markers, function(item) {
return item.spaceId == panelSpaceId
})
google.maps.event.trigger(marker, "mouseout");
console.log("out" + marker.spaceId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
最佳答案
您可以通过使用 mouseenter
代替 mouseover
和 mouseleave
代替 mouseout
来避免这个问题。原因很简单:mouseenter
仅在光标“进入”包含其子元素的元素时触发——因此将鼠标悬停在元素的子元素上不会重新触发 mouseenter
事件。
这种类似的逻辑适用于 mouseleave
与 mouseout
。你可以看到这种效果正在发生 based on a fiddle由@gilly3 在 his answer 中创建到 similar question .我没有将您的问题标记为重复,因为您的回答主要是对 mouseover/leave
事件进行故障排除,而不是询问 mouseover/enter
和 mouseout/leave< 之间的区别
.
想象一下会很有帮助:
- entering 表示当您的光标进入元素的边界时。即使您在子节点中,您仍然在边界内,因此它永远不会被多次触发。
- (h)overing 可以可视化为在 Canvas 上看到您的元素。如果您将鼠标悬停在屏幕上的元素在屏幕上可见,则会触发 mouseover 事件。当您的光标移动到子元素上方时,光标不再上方父元素,因此,当您来回移动时,事件会一次又一次地触发。<
这是您修改后的代码,我只是用正确的事件替换了违规事件:
$(document).off("mouseenter").on("mouseenter", "div.panel", function() {
var panelSpaceId = $(this).attr("data-spaceId");
var marker = _.find(scope.markers, function(item) {
return item.spaceId == panelSpaceId
})
google.maps.event.trigger(marker, "mouseenter");
console.log("over" + marker.spaceId);
});
$(document).off("mouseleave").on("mouseleave", "div.panel", function() {
var panelSpaceId = $(this).attr("data-spaceId");
var marker = _.find(scope.markers, function(item) {
return item.spaceId == panelSpaceId
})
google.maps.event.trigger(marker, "mouseleave");
console.log("out" + marker.spaceId);
});
关于javascript - mouseover 和 mouseout 触发多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41645325/