Как сделать так, чтобы моя функция jQuery «Click» запускалась только для непосредственного пользователя li, а не для дочернего li?

Question

У меня есть:

$ ('# accordion> li) .click (function () {

Но он запускается, если щелкнуть также #accordion li ol li.

Вот HTML-разметка:

<ul id="accordion"> 
   <li id="test1">
       <a href="#">Test</a>
       <ol>
            <li>
            <a href="#">test</a>     
            </li>
       </ol>
    </li>
</ul>

Answer 1

Проблема в том, что события в дочерних элементах всплывают до элемента-предка.Остановите это, проверив, является ли первый предок (event.target) исходного элемента li тем, где обрабатывается функция:

$('#accordion > li').click(function (event) {
    if ($(event.target).closest('li').is(this)) {
        // it's the right one
    }
});

См.

• event.target
• closest
• is

Answer 2

Более простое решение может быть:

$('#accordion > li:not(li li)').click(function () {});

Answer 3

Вы можете использовать stopImmediatePropagation () из jquery, чтобы избежать его пузырей.

$('#accordion > li).click(function (event) {
     event.stopImmediatePropagation();
     //do what you need to do

}