Mouseover 和 mouseout 触发多次

Question

我在 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>

Answer 1

您可以通过使用mouseenter 代替mouseover 和mouseleave 代替mouseout 来避免此问题。原因很简单：mouseenter 仅在光标“进入”元素（包括其子元素）时触发 - 因此将鼠标悬停在元素的子元素上不会重新触发 mouseenter 事件。

这种类似的逻辑适用于mouseleave 与mouseout。你可以看到@gilly3 在his answer 到similar question 中创建的based on a fiddle 发生了这种效果。我没有将您的问题标记为重复，因为您的回答主要是对mouseover/leave 事件进行故障排除，而不是询问mouseover/enter 和mouseout/leave 之间的区别。

想象一下会很有帮助：

• 进入 表示当您的光标进入元素的边界时。即使您在子节点中，您仍然在边界内，因此它不会被多次触发。
• (h)overing 可以可视化为在画布上查看您的元素。如果您的光标所在的元素在屏幕上可见，则触发 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);
});