javascript - 为什么即使在alert()之前调用了preventDefault()，alert()仍会执行？

在以下代码中，即使在alert('Alert on btn is triggered') }) el的event.preventDefault()处理程序中的此行之前调用click时，为什么也会触发#btn。

同样，为什么onclick="alerted()不在#btn或#wrap div上触发，但回调触发，而click随addEventListener触发。

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>

最佳答案

调用event.preventDefault()或event.stopPropagation不会停止当前正在进行的回调。无论函数的上下文如何，如果函数开始运行，阻止它继续运行的唯一方法就是显式return。

如果要确保在调用preventDefault()时函数的其余部分停止运行，请更改为：

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

将event定义为处理程序采用的参数也可能是一个好主意，而不是依赖隐式全局window.event（尽管它在某些浏览器中有效，但它是not a great idea to use）。

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>

关于javascript - 为什么即使在alert()之前调用了preventDefault()，alert()仍会执行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58048488/