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

Question

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

Answer 1

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

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

Answer 2

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

object.mouseenabled = false;

Я нашел способ, который работает довольно хорошо, это использовать CSS и положить:

.element { pointer-events: none; }

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

Answer 3

Используйте «event. 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

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