单击子元素时停止触发父事件

Question

我在li标签上有一个点击事件，然后在那个li我有另一个嵌套的 li。

当点击父li一切正常。 但是 onclick 嵌套或 child li会触发父li单击事件。

我使用过event.stopPropagation()方法，但在我的情况下它不起作用。

 $("li").on("click",function() { console.log(this.firstChild.textContent) }) $('#testUl > li').on('click', function(e) { e.stopPropagation(); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <ul id="testUl"> <li> <a href="#">Test A</a> <div class="innerUl"> <ul> <li>Inner A</li> <li>Inner B</li> <li>Inner C</li> </ul> </div> </li> </ul>

Answer 1

 $('#testUl .innerUl li').on('click', function(e) { e.stopPropagation(); }); // or $('#testUl li').on('click', function(e) { e.stopPropagation(); }); $('#testUl > li').on('click', function(e) { alert('test'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- #testUl --> <ul id="testUl"> <!-- #testUl > li --> <li> <!-- #testUl > li > a or #testUl a --> <a href="#">Test A</a> <!-- #testUl > li > .innerUl or #testUl .innerUl --> <div class="innerUl"> <!-- #testUl > li > .innerUl > ul or #testUl ul --> <ul> <!-- #testUl > li > .innerUl > ul > li or #testUl li or #testUl .innerUl li or .innerUl li --> <li>Inner A</li> <li>Inner B</li> <li>Inner C</li> </ul> </div> </li> </ul>

您正在使用错误的选择器来停止传播

当您使用#testUl > li您会调用第一个li子元素，但是在#testUl上的li有li元素，因此请调用#testUl li或#testUl .innerUl li

Answer 2

您可以比较e.target是具有click事件的元素，而e.currentTarget是您实际单击的元素。 如果它们不匹配，则您不执行其余功能就返回

 $('#testUl > li').on('click', (e) => { if (e.target !== e.currentTarget) { return; } console.log('parent'); }); $('.innerUl li').on('click', (e) => { if (e.target !== e.currentTarget) { return; } console.log('child'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="testUl"> <li> Test A <div class="innerUl"> <ul> <li>Inner A</li> <li>Inner B</li> <li>Inner C</li> </ul> </div> </li> </ul>

Answer 3

如果没有 jQuery，您可以使用事件委托并决定使用Element.closest()

 document.addEventListener(`click`, handle); function handle(evt) { console.clear(); if (!evt.target.closest(`.innerUl`) && evt.target.closest(`#testUl`)) { console.log(`You clicked (something within) the first li of ul#testUl`); } }

 <ul id="testUl"> <li> <a href="#">Test A</a> <div class="innerUl"> <ul> <li>Inner A</li> <li>Inner B</li> <li>Inner C</li> </ul> </div> </li> </ul>

与 jQuery 相同的想法

 $("#testUl").on("click", evt => { console.clear(); if (!evt.target.closest(`.innerUl`) && evt.target.closest(`#testUl`)) { console.log(`You clicked ${evt.target.outerHTML}`); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> <ul id="testUl"> <li> <a href="#">Test A</a> <div class="innerUl"> <ul> <li>Inner A</li> <li>Inner B</li> <li>Inner C</li> </ul> </div> </li> </ul>

Answer 4

您可以尝试使用stopImmediatePropagation()

请参阅此处： https : //developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation