stopPropagation和preventDefault不起作用，父級點擊仍在觸發

Question

在我的代碼中，我在父div上添加了onclick ，並希望對內部div執行其他操作，但是單擊內部div也會觸發父單擊。 如何制止呢？

 $(document).on('click', '.child', function(e) { e.preventDefault(); e.stopPropagation(); console.log('child'); }); function parentfun(sender) { console.log('parent'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent" onclick="parentfun(this)"> parent <div class="child">child</div> </div> 

上面的div是在其他事件的運行時生成的。

點擊孩子，也會觸發父母的點擊。 preventDefault和stopPropagation無法正常工作。

僅供參考：我的問題與單擊孩子錨點時如何防止父母的onclick事件觸發不同？

Answer 1

您在此處實際要做的是將點擊事件綁定到文檔，而不是子元素。 因此，該事件已經一直蔓延到整個文檔，現在嘗試使用stopPropagation停止冒泡為​​時已晚。

當我將點擊處理程序改為孩子時，請參見此處：

 $(".child").on('click', function(e) { e.preventDefault(); e.stopPropagation(); console.log('child'); }); function parentfun(sender) { console.log('parent'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent" onclick="parentfun(this)"> parent <div class="child">child</div> </div> 

編輯

隨着問題的改變，如果動態創建元素，您可以執行以下操作（例如）：

  $(document).on('click', '.parent, .child', function(e) { e.stopPropagation(); if ($(this).is(".child")) { console.log('child'); } else { console.log('parent'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> parent <div class="child">child</div> </div> 

Answer 2

使用普通香草JS可以按預期工作：

 function logEventTarget(e) { e.stopPropagation(); console.log(e.target.id); } parentDiv.addEventListener('click', logEventTarget) childDiv.addEventListener('click', logEventTarget) 

 <div id="parentDiv"> parent <div id="childDiv">child</div> </div> 

使用內聯事件處理程序不會將事件傳遞給處理程序功能：

 function logEventTarget(e) { e.stopPropagation(); console.log(e.target.id); } childDiv.addEventListener('click', logEventTarget) 

 <div id="parentDiv" onclick="logEventTarget()"> parent <div id="childDiv">child</div> </div> 

根本不應該使用內聯事件處理程序的眾多原因之一。 請注意， e.stopPropagation()仍然適用於childDiv 。

Answer 3

您會注意到，單擊chlid元素時，父級會首先觸發（這就是父級先打印然后子級打印的原因），因為event capturing先於event bubbling 。 為了從父級停止event capturing階段，您可以停止傳播該事件，然后僅觸發子級事件。

 $(document).on('click', '.child', function(e) { //e.preventDefault(); e.stopPropagation(); console.log('child'); }); $(document).on('click', '.parent', parentfun); function parentfun(e) { e.stopPropagation(); console.log('parent'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> parent <div class="child">child</div> </div> 

Answer 4

您還可以通過在HTML代碼中進行一些編輯來解決此問題

<div class="parent" id="parent-div">

<!-- Just adding parent div text inside span tag -->

<span>parent</span>

<div class="child">child</div>

</div>

現在去jQuery代碼

 $('.parent span').on('click',function(){

  //only print child text u can do more

  alert($('.child').text());

  //Change color of child

  $('.child').css('color','red');

});