Как игнорировать события мыши в дочерних элементах в jQuery?

У меня есть неупорядоченный список с событиями mouseover и mouseout, прикрепленными к элементам li. Каждый из них содержит ссылку, а в li есть бит. Когда я наводил курсор на li, событие mouseover запускается, но когда я нажимаю на ссылку, содержащуюся в li, мыши и события 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>

Ответ 1

Кажется, я нашел ответ на свой вопрос. Для тех, кто может иметь такую же проблему; попробуйте этот код. Кажется, что наведите курсор на дочерние элементы, как это делают другие события мыши.

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

Ответ 2

Использовать событие 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, а не mouseover/out. jQuery нормализует свое поведение в браузерах, и эти события имеют преимущество не пузыря...

Ответ 3

Я искал эквивариантное поведение в JS, где в AS3 вы можете поставить:

object.mouseenabled = false;

То, как я нашел, что работает очень хорошо, - это использовать CSS и поставить:

.element { pointer-events: none; }

(но я предполагаю, что это работает только в том случае, если вам вообще не нужен элемент. Я использую его для всплывающих подсказок, но не хочу, чтобы он был странным, когда вы отводили указатель мыши).

Ответ 4

Вы можете попробовать это

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

Преимуществом является использование делегирования событий. Удачи!

Ответ 5

Используйте классы css, чтобы различать различные уровни меню. Затем вы можете легко найти один или несколько классов в селекторах jQuery.