event.preventDefault()在submit按钮上失效，点击页面仍重载求助

可能的原因及解决方案 #

1. 确保JS代码在DOM加载完成后执行 #

如果JS代码在DOM元素渲染前就执行，document.querySelector(".links-add-button")会返回null，导致事件根本没绑定上。

解决办法：

• 把JS脚本移到HTML的</body>标签之前，确保DOM先加载完成：

<!-- 页面其他内容 -->
<script>
const addLinkButton = document.querySelector(".links-add-button");

addLinkButton.addEventListener("click", addLink);

function addLink(event) {
  event.preventDefault();
  // 执行你的业务代码
  console.log("按钮点击生效");
}
</script>
</body>

• 或者用DOMContentLoaded事件包裹代码：

document.addEventListener("DOMContentLoaded", function() {
  const addLinkButton = document.querySelector(".links-add-button");
  addLinkButton.addEventListener("click", addLink);
});

function addLink(event) {
  event.preventDefault();
  // 业务代码
}

2. 改用事件委托处理动态元素 #

如果表单是动态添加/显示的（比如初始带hidden类，后续通过JS展示），直接绑定按钮事件会失效——绑定事件时元素还不存在于DOM中。

解决办法：把事件绑定到父元素或document上，利用事件冒泡：

document.addEventListener("click", function(event) {
  if (event.target.closest(".links-add-button")) {
    event.preventDefault();
    // 执行你的业务代码
    console.log("按钮点击触发");
    // 示例：获取输入框值
    const name = document.querySelector(".links-name-input").value;
    const link = document.querySelector(".links-link-input").value;
    console.log(name, link);
  }
});

closest()方法会匹配当前元素或其祖先中符合选择器的元素，点击按钮内的<i>图标时也能正常触发。

3. 检查元素选择器有效性 #

在浏览器控制台执行document.querySelector(".links-add-button")，查看返回值：

• 如果返回null，说明选择器拼写错误，或元素未被正确渲染到DOM中，检查HTML类名与JS选择器是否完全一致。

4. 保留submit类型按钮的正确用法 #

若要保留按钮type="submit"，直接监听表单的submit事件更可靠：

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector(".links-add-container");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    // 业务代码
    console.log("表单提交触发");
  });
});

内容的提问来源于stack exchange，提问作者Danil Yahin