與jQuery意外的「onmouseover」行爲

我有一個「onmouse over」甚至綁定到所有頁面的元素。當鼠標懸停在某個元素上時，它會將紅色邊框繪製到最近的相關元素上（例如，嘗試aardvark）。與jQuery意外的「onmouseover」行爲

我有follwing代碼：

<p> 
<img height="333" width="250" title="Image par hyperbolic pants explosion sous licence CC - http://www.flickr.com/photos/[email protected]/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」時，「mouseover」確實被觸發，但是在之後，在「P」上再次觸發「鼠標懸停」。我會理解「P - > IMG」，但「IMG - > P」讓我感到困擾。爲什麼，2鼠標懸停在一行？我沒有移動鼠標。

現在，我錯過了什麼？

規格：

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

來源

2009-10-05 e-satis

我不得不從你的帖子中刪除圖像，因爲ImageShack已經刪除它並用廣告代替它。有關更多信息，請參閱http://meta.stackexchange.com/q/263771/215468。如果可能的話，你最好重新上傳它們。謝謝！ – Undo 2015-09-22 00:42:28

在鼠標懸停處理程序中停止事件傳播。

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

您可能還需要考慮使用hover()方法或hoverIntent()插件。後者將有助於減少閃爍，因爲您只需在調用事件處理程序之前強制執行定時等待，即可在頁面上拖動鼠標。

來源

2009-10-05 15:32:39 tvanfosson

甚至更好，使用e.stopPropagagtion（）。 – 2009-10-05 15:40:36

你被Event Bubbling抓住了。使用mouseenter()代替mouseover。

來源

2009-10-05 15:29:58 Greg

我實際上使用「mouseenter」，但我仍然愚蠢。 – 2009-10-05 15:41:27

好吧，我想殺死自己，但這裏是答案。

我傻傻地忘了停止事件傳播。你的回調函數，當觸發「onmouseover」時調用的函數，當然必須返回是否完成它的工作。如果您不希望事件冒泡上限，請返回「false」。

現在，花了3個小時的主題後，你會原諒我，我必須自己吊死。乾杯。

P.S：我將所有SO代表遺贈給社區Wiki。

來源

2009-10-05 15:39:30

與jQuery意外的「onmouseover」行爲

回答

相關問題