Question

我有一个“onmouse over”甚至绑定到页面的所有元素。当鼠标悬停在元素上时，它会将红色边框绘制到最近的上部相关元素（例如，尝试aardvark）。

我有以下代码：

<p>
<img height="333" width="250" title="Image par hyperbolic pants explosion sous licence CC - http://www.flickr.com/photos/74502564@N00/2716444681/" class="illustred" src="context-selector-test_files/rha_20090929_antivirus.jpg" />
Ah là là... ces abrutis qui continuent à refuser d'installer des antivirus parce que "
<em>
Je ne télécharge pas !
</em>
" ou "
<em>
Je ne vais que sur des sites de confiance.
</em>
</p>

您可以看到“img”位于“P”内。

预期的行为是，当我越过“P”时，它会接近，然后当我转到“IMG”时，边界会转到“IMG”。

没有。

问题不在于CSS，因为我不使用CSS，而是使用4个div来模拟元素周围“绝对”位置的4个边框。这是下一步的必备条件。

当我越过“IMG”，“鼠标悬停”确实被触发时，问题就出现了，但是在“P”之后再次触发“鼠标悬停”。我会理解“P - ＆gt; IMG”，但“IMG - ＆gt; P”会让我感到烦恼。为什么，2个鼠标悬停在一排？我没有移动鼠标。

现在，我缺少什么？

规格：

html 4;
css 2;
jquery 1.3;
firefox 3.5;
ubuntu 9.04;
咖啡1.50（l）。

Answer 1

你被Event Bubbling抓住了。

使用mouseenter()代替mouseover。

Answer 2

停止鼠标悬停处理程序中的事件传播。

$('selector').mouseover( function(e) {
    ...
    e.stopPropagation();
});

您可能还想考虑使用hover()方法或hoverIntent()插件。后者将有助于减少任何闪烁，因为只需在调用事件处理程序之前强制执行定时等待，只需在页面上拖动鼠标即可。

Answer 3

好的，我想自杀，但这是答案。

我愚蠢地忘了停止事件传播。你回调函数，当触发“onmouseover”时调用的函数当然必须返回是否已完成它的工作。如果您不希望事件被冒泡，请返回“false”。

现在，在这个问题上花了3个小时后，你能原谅我，我必须自己上吊。欢呼声。

P.S：我把我所有的SO代表留给了社区维基。

使用jQuery意外的“onmouseover”行为

3 个答案: