У меня есть неупорядоченный список с событиями 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>
Кажется, я нашел ответ на свой вопрос. Для тех, кто может иметь такую же проблему; попробуйте этот код. Кажется, что наведите курсор на дочерние элементы, как это делают другие события мыши.
jQuery('#menu li').hover(
function() {
jQuery(this).children('ul').show('fast');
return false;
},
function() {
jQuery(this).children('ul').hide('fast');
return false;
}
);
Использовать событие 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 нормализует свое поведение в браузерах, и эти события имеют преимущество не пузыря...
Я искал эквивариантное поведение в JS, где в AS3 вы можете поставить:
object.mouseenabled = false;
То, как я нашел, что работает очень хорошо, - это использовать CSS и поставить:
.element { pointer-events: none; }
(но я предполагаю, что это работает только в том случае, если вам вообще не нужен элемент. Я использую его для всплывающих подсказок, но не хочу, чтобы он был странным, когда вы отводили указатель мыши).
Вы можете попробовать это
$('#menu li').live('mouseenter mouseleave', function (e) {
if (e.type == 'mouseenter') {
//Show ul
} else {
//Hide ul
}
});
Преимуществом является использование делегирования событий. Удачи!
Используйте классы css, чтобы различать различные уровни меню. Затем вы можете легко найти один или несколько классов в селекторах jQuery.