如何忽略jQuery中子元素上的鼠标事件? [英] How do I ignore mouse events on child elements in jQuery?

问题描述

我有一个无序列表，其中liover上附加了mouseover和mouseout事件.每个都包含一个链接，并且li中有一些填充.当我将鼠标悬停在li上时，将触发mouseover事件，但是当我将鼠标悬停在li中的链接 contained 时，将依次触发mouseout和mouseover事件.看来子元素正在触发其父元素鼠标事件...我该如何停止它?我希望鼠标悬停在链接上时保持鼠标悬停，而不是每次将鼠标悬停在链接上时都激活动画.这是我的代码；

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;

 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>

推荐答案

似乎我已经找到了自己问题的答案.对于可能有相同问题的任何人；请尝试使用此代码.似乎悬停并没有像其他鼠标事件那样进入子元素.

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;
    }
);

这篇关于如何忽略jQuery中子元素上的鼠标事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！