為什么即使在 alert() 之前調用 preventDefault() 也會執行 alert()？

Question

在下面的代碼中，為什么alert('Alert on btn is triggered') }) ，即使在#btn el 的click處理程序中在此行之前調用event.preventDefault()也是如此。

此外，為什么onclick="alerted()不會在#btn或#wrap div 上觸發，但會觸發附加到帶有addEventListener的click的回調。

 var btn = document.getElementById('btn') var wrap = document.getElementById('wrap') btn.addEventListener('click', function() { event.stopPropagation() if (event.cancelable) { event.preventDefault() } alert('Alert on btn is triggered') }) function alerted() { alert('Alerted fired') } wrap.addEventListener('click', function() { alert(this.id) alert(event.target.tagName + "#" + event.target.id) })

 #wrap { padding: 20px; border: 1px solid red; }

 <div id="wrap" onclick="alerted"> <button id="btn" onclick="alerted">Click Me</button> </div>

Answer 1

調用event.preventDefault()或event.stopPropagation不會停止當前正在進行的回調。 無論function 的上下文如何，如果它開始運行，阻止它繼續運行的唯一方法是顯式return 。

如果要確保preventDefault()時 function 的 rest 停止運行，請更改為：

  if (event.cancelable) {
    event.preventDefault();
    return;
  }

將event定義為處理程序采用的參數也可能是一個好主意，而不是依賴於隱式全局window.event （雖然它在某些瀏覽器中有效，但使用起來不是一個好主意）。

 var btn = document.getElementById('btn') var wrap = document.getElementById('wrap') btn.addEventListener('click', function(event) { event.stopPropagation() if (event.cancelable) { event.preventDefault(); return; } alert('Alert on btn is triggered') }) function alerted() { alert('Alerted fired') } wrap.addEventListener('click', function() { alert(this.id) alert(event.target.tagName + "#" + event.target.id) })

 #wrap { padding: 20px; border: 1px solid red; }

 <div id="wrap" onclick="alerted"> <button id="btn" onclick="alerted">Click Me</button> </div>

Answer 2

解釋：在你的點擊事件中，警報不是默認的，調用event.preventDefault(); 無論如何都會觸發警報。

preventDefault()取決於默認事件。 示例：在 click 事件上使用preventDefault()將阻止點擊觸發器，或者在 keydown 上使用preventDefault()將阻止默認鍵盤按下事件。

就像當前的答案一樣，為了防止警報，使用return;

另外，我剛剛注意到，您的代碼onclick="alerted"應該是onclick="alerted()"

更新：

解釋 1：警報不會在btn中觸發，因為它被阻止了。 你把 alerted alerted()放在onclick上， click事件被阻止了。 換句話說，警報在點擊內，點擊被阻止，所以警報不會觸發。

解釋2：按鈕是一個object不是事件，對象可以有相同的事件。 示例：div 是容器，但您可以在它們上使用 click 事件。

Answer 3

因為當事件觸發時，即使您停止傳播，它也不會在其他事件偵聽器中觸發，但您的 function 將繼續執行。