event.preventDefault()在表单提交时失效，点击提交按钮页面刷新

核心问题是你绑定事件的对象搞错了：submit事件属于<form>元素，而非按钮。你给按钮绑定submit事件，这个事件根本不会被触发，自然event.preventDefault()就没执行，浏览器默认的表单提交行为照常运行，导致页面刷新。

两种修复方案： #

方案一：给表单绑定submit事件（推荐）

这是处理表单提交的标准方式，能覆盖点击按钮、按回车提交等所有表单提交场景：

const form = document.querySelector('form');

const submitForm = function (event) {
  event.preventDefault();
  console.log('Hi');
};

form.addEventListener('submit', submitForm);

HTML无需修改，保持原结构即可。

方案二：给按钮绑定click事件

如果只需要监听按钮点击行为，可以改绑click事件：

const submitBtn = document.querySelector('.submit-btn');

const submitForm = function (event) {
  event.preventDefault();
  console.log('Hi');
};

submitBtn.addEventListener('click', submitForm);

额外补充： #

如果你的按钮不需要触发表单提交，只是普通操作按钮，可以直接给按钮加上type="button"，这样浏览器就不会默认触发表单提交，也就不需要调用preventDefault()了：

<form>
    <label>Input your facebook profile URL</label>
    <input type="text" />
    <button class="submit-btn" type="button">Submit</button>
</form>

内容的提问来源于stack exchange，提问作者Elmar Mammadov