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

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

object.mouseenabled = false; 

Как я обнаружил, что работает очень хорошо, чтобы использовать CSS и поставить:

.element { pointer-events: none; } 

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