为何event.preventDefault()未按预期生效？求详细技术解答

嘿，我捋了下你的示例场景，问题出在事件的归属逻辑和触发顺序上，给你掰扯得明明白白：

首先还原下你的代码逻辑：你应该是给表单里的某个父元素（比如<div>）绑定了click事件，然后在事件处理函数里调用了e.preventDefault()，但点击里面的提交按钮时，表单还是照样提交了，对吧？

核心原因1：preventDefault()只管「当前事件」的默认行为 #

event.preventDefault()的作用是阻止当前事件对象对应的那个事件的默认行为，不是所有后续的默认行为都能拦。

当你点击提交按钮时，会发生这一连串事儿：

1. 按钮自身的click事件先触发，这个事件的默认行为就是「触发表单的submit动作」；
2. 按钮的click事件会向上冒泡到父元素（比如你绑定事件的div，再到form），触发它们的click事件。

你在父元素的click事件里调用e.preventDefault()，其实只是在阻止父元素自身click事件的默认行为——但div这类元素的click事件根本没有默认行为啊！所以这个调用相当于白写了，按钮的click事件的默认行为（让表单提交）完全没被影响到。

核心原因2：事件触发有顺序，你拦晚了 #

按钮的click事件是先执行的，它已经触发了表单提交的默认行为，之后父元素的click事件才冒泡上来。这时候你再调用preventDefault()，就像洪水已经冲过来了才关闸门，根本没用。

怎么解决？给你几个靠谱方案 #

• 方案1：直接给按钮绑定事件
  把事件绑定到提交按钮上，在它的click事件里调用e.preventDefault()，直接阻止按钮的默认行为，表单就不会提交了：

  document.querySelector('button').addEventListener('click', function(e) {
    e.preventDefault();
    // 你的其他业务逻辑
  });
  

• 方案2：绑定表单的submit事件
  这其实是更稳妥的做法，因为表单提交可能不只是点击按钮触发（比如回车键），绑定submit事件能一网打尽所有提交场景：

  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    // 你的表单处理逻辑
  });
  

总之记住：preventDefault()只对「当前绑定的事件」的默认行为有效，找对事件绑定的目标，才能精准拦截~

内容的提问来源于stack exchange，提问作者L.S