為什么我的事件傳播沒有停止？

Question

我想停止點擊事件從傳播到父元素。 這是HTML代碼。

<div style="cursor: pointer; display: inline-block; float: right" onclick="if (confirm('Continue?')) { jQuery(this).children().click(); }">
  <button style="float: right; pointer-events: none;" class="form-submit-bold btn btn-default form-submit" id="edit-submit-password" name="op" value="Save Password" type="submit">Save Password</button>
</div>

並已將此jquery事件從控制台附加到按鈕元素

jQuery($0).on('click', function(e) {
  alert('hi');
  console.log(e);
  e.stopPropagation();
});

現在，當我使用jQuery($0).click();單擊按鈕元素時jQuery($0).click(); 此警報為“ hi”，但再次顯示應在單擊div時觸發的警報。 我想停止這個。 為什么stopPropagation不起作用？

Answer 1

刪除pointer-events ，將其設置為none ，這none是我發現的原因

元素永遠不是指針事件的目標； 但是，如果指針后代的指針事件設置為其他值，則指針事件可以將其后代元素作為目標。 在這些情況下， 指針事件將在事件捕獲/冒泡階段期間按適當的方式觸發此父元素上的事件偵聽器，以使其進入/離開后代 。

 $('button').on('click', function(e) { e.stopPropagation() alert('hi I am child'); console.log(e.target); }); 

 div { cursor: pointer; display: inline-block; float: right; } button { float: right; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div onclick="alert('Hi I am parent')"> <button> hit me </button> </div> 

看你的問題

 jQuery('button').on('click', function(e) { alert('hi'); console.log(e); e.stopPropagation(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="cursor: pointer; display: inline-block; float: right" onclick="if (confirm('Continue?')) { jQuery(this).children().click(); }"> <button style="float: right;" class="form-submit-bold btn btn-default form-submit" id="edit-submit-password" name="op" value="Save Password" type="submit">Save Password</button> </div>