Question

.on("mouseenter") and .on("mouseleave")，当console.log事件发生时，event.type为"mouseover"

这是正常的吗？我虽然对mouseenter这是event.type "mouseenter"

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

我可以看到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-circle时，它会触发两次。

Answer 1

mouseenter不是本机dom事件。它包装鼠标悬停。让我解释：假设您有元素P，即100x100，并且子元素C为50x50。

当您首次将鼠标悬停在P上时，您将获得鼠标悬停和鼠标中心。当您现在将鼠标悬停在C上时，浏览器将触发鼠标输出为P并将鼠标悬停在C上。但是C在P里面，所以你没有离开＆＃39; P还是 - 这就是为什么要制作mouseenter和mouseleave的原因。

实施事件的库检查过量事件和目标事件的目标，以确定是否要进入或离开。

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

您还可以调用event.preventDefault（）和/或从事件处理程序返回false。

Answer 2

在jQuery v2.1.0中它似乎正常工作。以下是代码http://jqversion.com/#!/jad2sKb的示例。似乎mouseenter事件只触发一次，event.type为mouseenter

如果有任何不同，请更新演示。

Javascript mouseenter事件被触发两次

2 个答案: