Javascript mouseenter事件激发了两次

Javascript mouseenter event fired twice

本文关键字：两次 mouseenter 事件 Javascript      更新时间：2023-09-26

CCD_ 1，当console.log事件时，在这两种情况下，event.type都是"mouseover"

这正常吗？我认为对于mouseenter，您可以看到event.type "mouseenter"

我的问题是，当鼠标悬停在元素上时，javascript鼠标输入事件触发了两次。

我可以看到，在两个激发的事件中，event.fromElement是不同的。

如何停止冒泡？event.stopProppagation，不工作

<span class="foo-wrapper">
    <i class="icon-circle"></i>
</span>
 $(".foo-wrapper .icon-circle").on("mouseenter", function(e){ 
   e.stopPropagation();
   cur_target = $(e.target);
   $("#tooltip").css({'top': parseInt(cur_target.offset().top-116), 'left': parseInt(cur_target.offset().left-141)}).fadeIn(150);
 }

当鼠标进入.icon圆圈时，它会触发两次。

mouseenter不是本机dom事件。它的包装鼠标套。让我解释一下：假设你有一个元素P，它是100x100，它有一个子元素C，它是50x50。

当您第一次将鼠标悬停在p上时，您将同时获得mouseover和mouseenter。当您现在将鼠标悬停在C上时，浏览器会为P触发mouseout，为C触发mouseover。但是C在P里面，所以你还没有"离开"P——这就是为什么产生了mouseenter和mouseleave。

实现事件的库检查over-and-out事件的目标，以确定是开火进入还是离开。

因此，如果它发射两次，可能来自不同的元素。您需要将处理程序添加到正确的元素中，而不是同时添加到这两个元素中。

您还可以从事件处理程序中调用event.prventDefault((和/或返回false。

在jQuery v2.1.0中，它似乎可以正常工作。下面是您的代码示例http://jqversion.com/#/jad2sKb。似乎mouseenter事件只触发一次，而event.type是.on("mouseenter") and .on("mouseleave")0

如果有什么不同，请更新演示。

相关文章：