preventDefault() 事件方法

在 JavaScript 中，preventDefault() 事件方法可以用于阻止默认事件的发生。

什么是默认事件？

当某个事件被触发时，浏览器通常会按照默认的行为来处理该事件，例如当用户单击表单中的提交按钮时，页面将会被重载并向服务器发送表单数据。这就是默认事件。

如何阻止默认事件？

使用 preventDefault() 方法可以阻止默认事件的发生。这个方法需要在事件处理函数中调用，并且事件对象需要作为参数传递进去。

例如在下面的代码中，通过调用 preventDefault() 方法可以阻止默认的表单提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // Do something else
});

在这个例子中，preventDefault() 方法阻止了表单的默认提交事件，从而允许更多自定义行为。

注意事项

需要注意的是，如果一个事件处理函数同时需要阻止默认事件和停止事件冒泡，需要在调用 preventDefault() 方法之后再调用 stopPropagation() 方法，否则 preventDefault() 方法可能无效。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
  // Do something else
});

为了避免 preventDefault() 导致的一些副作用，需要在每次事件处理之后都调用 preventDefault() 方法，而不是将它作为全局设置。另外在特定场景下，可能需要使用 return false 来代替 preventDefault() 方法来阻止默认事件。

总结

preventDefault() 事件方法可以用于阻止默认事件的发生，需要在事件处理函数中调用，并且需要注意 preventDefault() 方法和 stopPropagation() 方法的调用顺序以及是否需要在每次事件处理之后都重新调用。