jQuery li: есть (ul) проблема с селектором

Question

Я создавал дерево, используя список UL LI и jQuery. Я использовал JQuery Selector

jQuery (li: has (ul)), чтобы найти все узлы списка, имеющие дочерние элементы, а затем добавил к нему событие click.

jQuery(li:has(ul)).click(function(event) {

    jQuery(this).children.toggle();
    jQuery(this).css("cursor","hand");

});

Это работает для меня, за исключением того, что я не понимаю, почему я получаю курсорную руку и запускаю событие щелчка, даже когда я беру указатель мыши на потомков моего выбранного li

<li> Parent // it works here that is fine
<ul>
<li> child1   // it works here i dont understand need explanation
</li>
<li> child2   // it works here i dont understand need explanation
</li>
</ul>
</li>

Answer 1

То, что вы видите, - это пузыри событий. Когда вы щелкаете по элементу-потомку, событие также всплывает до его предков. Ваш обработчик щелчков на элементе-предке - это то, что вызывается. Если вы этого не хотите, вам также нужно остановить распространение событий в обработчиках щелчков дочерних элементов, чтобы предотвратить всплытие события.

jQuery(li:has(ul)).children().find('li').click(function(e) {
    e.stopPropagation();
});

Answer 2

Свойство cursor и событие click наследуются дочерними элементами.

Чтобы предотвратить наследование свойства cursor, вы можете добавить правило CSS, которое явно устанавливает курсор для элементов <ul> и <li>, например:

ul, li {
    cursor: default;
}

Чтобы предотвратить срабатывание события click для детей, вы можете проверить event.target, например:

if (event.target !== this) return;

Answer 3

да, попробуйте

jQuery('ul',this).css("cursor","hand !important"); .//, чтобы сказать ему, чтобы применить курсор к элементам ul с "this", то есть к оригинальному элементу li