鼠标悬停和鼠标移出触发多次 [英] Mouseover and mouseout trigger multiple times

问题描述

我在JS中有两个关于mouseover和mouseout事件的内容.它们用于检查我是否将鼠标悬停在页面上的面板上.但是问题是当我将鼠标悬停在面板上时会触发(好)，但是当我将鼠标悬停在该面板内的另一个元素上时，会触发mouseout事件，然后当我移至面板内的另一部分时再次触发mouseover事件./p>

我只希望将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){返回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){返回item.spaceId == panelSpaceId})google.maps.event.trigger(marker，"mouseout");console.log("out" + marker.spaceId);});  

解决方案

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

与 mouseout 相比，这种类似的逻辑适用于 mouseleave .您可以看到基于由@ gilly3在类似问题.我不会将您的问题标记为重复，因为您的答案主要是解决 mouseover/leave 事件，而不是询问 mouseover/enter 与 mouseout/leave <之间的区别/code>.

可以想象一下:

• 输入表示光标进入元素的边界.即使在子节点中，您也仍然在范围内，因此永远不会触发多次.
可以将
• (h)上方可视化为在画布上看到您的元素.如果您的光标所在的元素在屏幕上可见，则会触发 mouseover 事件.当光标移到子元素上时，光标不再位于父元素上，因此，当您来回移动该事件时，该事件会被反复触发.li>

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

  $(document).off("mouseenter").on("mouseenter"，"div.panel"，function(){var panelSpaceId = $(this).attr("data-spaceId");var marker = _.find(scope.markers，function(item){返回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){返回item.spaceId == panelSpaceId})google.maps.event.trigger(marker，"mouseleave");console.log("out" + marker.spaceId);}); 

I have these two on mouseover and mouseout events in JS. They are for checking wether I'm hovering over a panel on my page. But the problem is when I hover over a panel it triggers (good), but then when I hover over another element inside that panel it triggers a the mouseout event and then the mouseover events again when I move to another part inside the panel.

I only want the mouseover and mouseout events firing once! Once for entering the panel another for leaving it. Is there a way to propagate the on mouseover call to all child elements in the div.panel. It seems like that would correct it.

Here are my events

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

解决方案

You can avoid this issue by using mouseenter instead of mouseover, and mouseleave instead of mouseout. The reason is simply: mouseenter is only fired when the cursor "enters" the element, which includes its children—so hovering over the child of the element does not re-fire the mouseenter event.

This similar logic applies to mouseleave vs of mouseout. You can see this effect happening based on a fiddle created by @gilly3 in his answer to a similar question. I am not marking your question as duplicate because your answer is primarily troubleshooting mouseover/leave events instead of asking about the distinct between mouseover/enter and mouseout/leave.

It is helpful to imagine this:

• entering means when your cursor enters the bounds of the element. Even when you are in a child node, you are still within the bounds, hence it is never triggered multiple times.
• (h)overing can be visualised as seeing your element on a canvas. If the element you your cursor over is visible on the screen, the mouseover event is triggered. The cursor is no longer over the parent element when your cursor moves over the child element, hence when you go back and forth the event is triggered over and over again.

Here is your modified code, where I simply replaced the offending events with the right ones:

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

这篇关于鼠标悬停和鼠标移出触发多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！