事件：preventDefault() vs. 返回 false

什么是事件？

在 Web 开发中，事件是指用户和浏览器之间的交互。例如，当用户点击一个按钮时，会触发一个 click 事件；当用户按下键盘上的某个键时，会触发一个 keydown 事件。

如何处理事件？

通常，我们需要编写 JavaScript 代码来处理事件。事件处理程序是一段函数，它会在特定事件发生时被调用。例如，下面的代码演示了如何在按钮上添加一个点击事件处理程序：

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  alert('Button clicked');
});

当按钮被点击时，就会弹出一个提示框。

preventDefault() 和返回 false 的区别

有时候，我们希望阻止事件的默认行为。例如，当用户点击一个链接时，浏览器会跳转到链接指向的页面。如果我们不希望这种行为发生，可以使用 preventDefault() 方法或者返回 false。

两种方式虽然都可以阻止默认行为，但是它们之间有一些微妙的区别。

preventDefault()

preventDefault() 是 Event 对象的一个方法，可以阻止事件的默认行为。例如，下面的代码演示了如何阻止链接的默认行为：

const link = document.querySelector('#myLink');
link.addEventListener('click', function(event) {
  event.preventDefault();
});

当链接被点击时，就不会跳转到指定的页面。需要注意的是，preventDefault() 方法只会阻止默认行为，而不会停止事件的传播。也就是说，其他的事件处理程序仍然可以接收到该事件。

返回 false

另一种阻止默认行为的方式是返回 false。例如，下面的代码演示了如何使用返回 false 来阻止链接的默认行为：

const link = document.querySelector('#myLink');
link.addEventListener('click', function() {
  return false;
});

这段代码与上面的代码实现的效果是一样的，都会阻止链接的默认行为。需要注意的是，返回 false 不仅会阻止默认行为，还会停止事件的传播。也就是说，其他的事件处理程序不会再接收到该事件。

怎样选择正确的方式？

在大多数情况下，使用 preventDefault() 是更好的选择。因为它只会阻止默认行为，不会影响事件的传播。如果我们想要阻止事件的传播，可以使用 Event 对象的 stopPropagation() 方法。

在某些情况下，返回 false 也可以用来阻止默认行为和事件的传播。但是需要注意的是，有一些浏览器可能会将返回 false 解释为取消事件的默认行为，而有些浏览器则会将其解释为同时取消事件的默认行为和事件的传播。因此，为了保持代码的可靠性，还是建议使用 preventDefault()。

示例代码

下面的代码演示了如何阻止链接的默认行为和事件的传播：

const link = document.querySelector('#myLink');
link.addEventListener('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
});

在这个例子中，我们使用 preventDefault() 方法阻止链接的默认行为，使用 stopPropagation() 方法阻止事件的传播。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12686