如何在jQuery中忽略子元素上的鼠标事件？

I have an unordered list with mouseover and mouseout events attached to the li elements. Each contains a link and there is a bit of padding in the li. When I mouseover the li the mouseover event is fired, but when I mouseover the link contained in the li the mouseout and the mouseover events are both fired in order. It seems the child elements are firing their parent elements mouse events...how do I go about stopping this? I want it to just stay mouseovered when mousing over the links, not activating the animations every time I mouse over a link. This is my code;

我有一个无序列表，其中包含附加到li元素的mouseover和mouseout事件。每个都包含一个链接，并在li中有一些填充。当鼠标悬停在li上时，鼠标悬停事件被触发，但当我鼠标悬停在li中包含的链接时，mouseout和mouseover事件都按顺序触发。似乎子元素正在触发它们的父元素鼠标事件......我该如何停止这个？我希望它只是在鼠标悬停在链接上时保持鼠标悬停，而不是每次鼠标悬停在链接上时都不激活动画。这是我的代码;

 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>

5 个解决方案

#1

It seems I've found the answer to my own question. For anyone who might have the same problem; try this code instead. It seems hover doesn't bubble into child elements like the other mouse events do.

我似乎找到了自己问题的答案。对于任何可能遇到同样问题的人;请尝试使用此代码。似乎悬停不像其他鼠标事件那样冒泡到子元素中。

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

#2

Use "event.stopPropagation()" to stop the events from bubbling upwards:

使用“event.stopPropagation（）”来阻止事件向上冒泡：

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

Alternatively use the mouseenter and mouseleave events instead of mouseover/out. jQuery normalizes their behaviour across browsers and these events have the benefit of not bubbling...

或者使用mouseenter和mouseleave事件而不是mouseover / out。 jQuery规范了他们在浏览器中的行为，这些事件的好处是没有冒泡......

#3

I was looking for the equivelant behavior in JS where in AS3 you can put:

我在寻找JS中的equivelant行为，你可以在AS3中放置：

object.mouseenabled = false;

The way I found that works pretty well is to use CSS and put:

我发现效果很好的方法是使用CSS并放置：

.element { pointer-events: none; }

(but I guess that only works if you don't need the element for anything at all. I use it for tooltips that pop up on hover, but don't want it to act weird when you move your mouse away).

（但我想这只有在你根本不需要任何元素的情况下才有效。我将它用于悬停时弹出的工具提示，但是当你将鼠标移开时不要让它变得怪异）。

#4

You can try this

你可以试试这个

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

The advantage is a usage of event delegation. Good luck!

优点是使用事件委托。祝你好运！

#5

Use css classes to distinguish the different menu levels. You can then easily search for one class or the other in your jQuery selectors.

使用css类来区分不同的菜单级别。然后，您可以在jQuery选择器中轻松搜索一个类或另一个类。

#1