javascript - 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。你可以看到这种效果正在发生 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);
});