使用preventDefault()无法阻止submit事件引发的页面刷新问题

你的问题出在事件绑定对象错误：submit事件是<form>元素的专属事件，<button type="submit">本身不会触发submit事件，所以你写的event.preventDefault()根本没被执行，点击按钮后浏览器还是会默认提交表单，导致页面刷新。

下面是两种可行的解决方式：

方式一：监听表单的submit事件（推荐） #

找到按钮所在的<form>元素，给它绑定submit事件，这样既能覆盖按钮点击的场景，也能处理用户按回车提交表单的情况：

// 获取按钮所在的表单
let bookForm = document.querySelector('.submitBook').closest('form');

bookForm.addEventListener('submit', (event) => {
  event.preventDefault();
  // 后续逻辑不变
  let newBook = new Book(titleInput.value, authorInput.value, pagesInput.value, readInput.checked);
  myLibrary.push(newBook);
  console.log(myLibrary);
});

方式二：给按钮绑定click事件 #

如果不想操作表单元素，也可以直接给按钮绑定click事件，阻止默认行为：

let submitBookButton = document.querySelector('.submitBook');

submitBookButton.addEventListener('click', (event) => {
  event.preventDefault();
  // 后续逻辑不变
  let newBook = new Book(titleInput.value, authorInput.value, pagesInput.value, readInput.checked);
  myLibrary.push(newBook);
  console.log(myLibrary);
});

额外提醒：如果你的按钮不在<form>标签内，<button type="submit">的默认行为依然是刷新页面，这时候用方式二也能解决问题，但更规范的做法是把表单相关元素都放在<form>标签中，用方式一处理。

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