單擊子元素時停止觸發父事件

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