如何忽略jQuery中子元素的鼠標事件？

我有一個無序的列表，鼠標懸停和鼠標事件附加到李元素。每個包含一個鏈接，並在裏面有一些填充。當我將鼠標懸停在li上時，mouseover事件被觸發，但是當我在鼠標懸停鏈接中包含時，mouseout和mouseover事件都按順序被觸發。看起來孩子元素正在發射他們的父元素鼠標事件......我該如何着手阻止它呢？我希望它在鼠標懸停在鏈接上時保持鼠標懸停狀態，而不是每次將鼠標懸停在鏈接上時都激活動畫。這是我的代碼;如何忽略jQuery中子元素的鼠標事件？

jQuery(document).ready(function(){ 
     jQuery('#menu li ul').hide(); 
     jQuery('#menu li').mouseover(function() { 
      jQuery(this).children("ul").show('fast').stop; 
      return false; 
     }); 
     jQuery('#menu li').mouseout(function() { 
      jQuery(this).children("ul").hide('fast').stop; 
      return false; 
     }); 
}); 

<ul id="menu"> 
     <li><a href="">Some link</a> 
      <ul>Sub content</ul> 
     </li> 
</ul>

來源

2009-04-19 Stephen Belanger

看來我已經找到了我自己的問題的答案。對於任何可能有同樣問題的人，請嘗試此代碼。似乎懸停不會像其他鼠標事件那樣冒泡到子元素中。

jQuery('#menu li').hover(
    function() { 
     jQuery(this).children('ul').show('fast'); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     return false; 
    } 
);

來源

2009-04-20 00:17:35

使用CSS類來區分不同的菜單級別。然後，您可以在jQuery選擇器中輕鬆搜索一個類或另一個類。

來源

2009-04-19 22:53:05

不幸的是，這將是非常困難的，因爲這是用於wordpress，它動態地注入所有這些，並且過濾輸出相當複雜。 – 2009-04-19 23:17:41

使用「事件stopPropagation（）。」從向上冒泡停止事件：

jQuery('#menu li a').mouseover(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 
    jQuery('#menu li a').mouseout(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    });

或者使用的，而不是鼠標懸停/出mouseenter和mouseleave事件。 jQuery規範化他們的行爲跨瀏覽器，這些事件的好處是不冒泡...

來源

2009-04-19 22:57:38 James

我已經試過了，它似乎沒有做任何事情。我也嘗試使用mouseenter和mouseleave，他們也沒有做任何事情。 – 2009-04-19 23:19:21

好的，我不是很對*。它會從鏈接中刪除鼠標懸停，但是鼠標懸停是從li元素中調用的，而不是鏈接 - 所以它只是閃爍着打開，然後在我嘗試將鼠標懸停時再次關閉。 – 2009-04-19 23:44:03

斯蒂芬自己提出的上述解決方案雖然看起來更直接，但如果您需要處理程序略微不同，例如好點。 – 2012-02-17 06:31:44

你可以試試這個

$('#menu li').live('mouseenter mouseleave', function (e) { 
    if (e.type == 'mouseenter') { 
     //Show ul 
    } else { 
     //Hide ul 
    } 
});

的優點是事件委派的使用。祝你好運！

來源

2010-11-10 11:54:32 podeig

我一直在尋找在JS的equivelant行爲，其中在AS3中，你可以把：

object.mouseenabled = false;

我發現的方式工作得很好，是使用CSS和放：

.element { pointer-events: none; }

（但我想只有當你不需要任何元素時纔可以使用它，我使用它作爲懸停時彈出的工具提示，但不希望它在移走鼠標時變得怪異）。

來源

2012-06-15 17:21:06 dug

如何忽略jQuery中子元素的鼠標事件？

回答

相關問題