JavaScript中如何阻止点击非提交按钮时表单提交

你遇到的问题其实很常见——HTML里的<button>元素默认的type属性是submit，哪怕你没显式写出来，点击这个关闭按钮时，浏览器也会把它当成提交按钮处理，进而触发表单的submit事件。

最简单直接的解决方式，就是给关闭按钮加上type="button"属性，明确告诉浏览器这只是个普通按钮，不会触发表单提交：

<form class="add_form" id="add_list_form">
  <input type="text" class="form-control" placeholder="Enter list title..." id="list_value" />
  <div class="mt-2">
    <button type="submit" class="btn btn-sm btn-success mr-1" id="add_list_btn">Add List</button>
    <!-- 新增type="button"属性 -->
    <button type="button" class="btn btn-sm btn-danger" id="close_btn">close</button>
  </div>
</form>
<script>
  const add_list_form = document.querySelector('#add_list_form');
  add_list_form.addEventListener('submit',(e)=>{
    e.preventDefault();
    console.log('form is submitted..')
  })
</script>

如果你不想修改HTML（虽然更推荐上面的语义化写法），也可以给关闭按钮绑定点击事件，手动阻止默认行为：

const closeBtn = document.querySelector('#close_btn');
closeBtn.addEventListener('click', (e) => {
  e.preventDefault();
  // 这里可以添加隐藏表单的逻辑，比如：
  // document.querySelector('#add_list_form').style.display = 'none';
});

两种方法都能解决问题，但第一种方法更符合HTML规范，代码也更简洁易懂。

内容的提问来源于stack exchange，提问作者Arvind Yadav