鼠标悬停和mouseout触发多次

Question

我在JS中的mouseover和mouseout事件中有这两个.它们用于检查我是否正在我的页面上的面板上盘旋.但问题是当我将鼠标悬停在面板上时它会触发(好),但是当我将鼠标悬停在该面板内的另一个元素上时,它会触发mouseout事件,然后当我移动到面板内的另一个部分时再次触发鼠标悬停事件.

我只希望mouseover和mouseout事件发射一次!一旦进入面板另一个离开它.有没有办法将on mouseover调用传播到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);
 });

Answer 1

您可以通过使用避免此问题mouseenter,而不是mouseover和,mouseleave而不是mouseout.原因很简单:mouseenter只有当光标"进入"元素(包括其子元素)时才触发 - 因此将鼠标悬停在元素的子元素上不会重新触发mouseenter事件.

这种类似的逻辑也适用于mouseleaveVS的mouseout.你可以看到这种效应发生的基础上拨弄通过@ gilly3在创造他的回答到类似的问题.我没有将您的问题标记为重复,因为您的答案主要是对mouseover/leave事件进行故障排除,而不是询问mouseover/enter和之间的区别mouseout/leave.

想象一下是有帮助的:

• 输入意味着当光标进入元素的边界时.即使您在子节点中,您仍然在边界内,因此它永远不会被触发多次.
• (h)可以将overing视为在画布上看到你的元素.如果屏幕上显示光标所在的元素,则会触发鼠标悬停事件.光标不再是在父元素,当你的光标移动过的子元素,因此,当你来回走的事件被触发了一遍又一遍.

这是您修改过的代码,我只是用正确的代码替换了有问题的事件:

$(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);
});