何时以及为什么在 JavaScript 中“返回 false”？

在 JavaScript 中，“返回 false”通常用于阻止默认行为或取消事件的传播。这在处理表单提交或点击事件等用户交互时非常常见。下面我们将详细介绍何时以及为什么要在 JavaScript 中“返回 false”。

阻止默认行为

当用户提交表单或点击链接时，浏览器通常会执行默认行为。例如，在表单提交时，浏览器会重新加载页面；在点击链接时，浏览器会跳转到链接的地址。在某些情况下，您可能希望阻止这些默认行为，以便自己处理事件。这时，您可以在事件处理函数中返回 false 将阻止浏览器执行默认行为。下面是一个示例：

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  // 阻止表单提交，禁止浏览器重新加载页面
  event.preventDefault();
  
  // 处理表单提交
});

在上面的示例中，我们在表单的submit事件处理函数中返回了 false，实际上是通过调用preventDefault()方法来阻止浏览器执行默认行为。这使得我们可以自己处理表单提交事件。

取消事件传播

JavaScript 中的事件处理分为两个阶段：捕获阶段和冒泡阶段。在事件触发后，默认情况下，事件将从上到下依次在 DOM 树中的每个元素上触发事件处理函数，这个过程称为事件的传播。当事件传播到一个元素时，如果它的事件处理函数返回 false，将会停止事件继续传播到下一个元素。这时，我们可以利用这个特性取消事件的传播，从而达到自己想要的处理结果。下面是一个示例：

const wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('click', function(event) {
  console.log('wrapper clicked');
});

const outer = document.querySelector('.outer');
outer.addEventListener('click', function(event) {
  console.log('outer clicked');
});

const inner = document.querySelector('.inner');
inner.addEventListener('click', function(event) {
  console.log('inner clicked');
  // 取消事件传播
  return false;
});

在上面的示例中，我们给三个元素分别绑定了click事件处理函数。当我们点击 inner 元素时，控制台将依次输出“inner clicked”、“outer clicked”，而不会输出“wrapper clicked”。这是因为 inner 元素的事件处理函数返回了 false，阻止了事件的传播。如果您希望停止事件的传播并且阻止默认行为，可以在事件处理函数中同时调用preventDefault()和stopPropagation()方法。例如：

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
  
  // 处理链接点击事件
});

在上面的示例中，我们阻止了链接的默认行为以及事件的传播。

总结

JavaScript 中“返回 false”通常用于阻止默认行为或取消事件传播。常见的使用场景包括表单提交、点击链接以及处理其他用户交互。注意，当您返回 false 时，实际上是在调用preventDefault()方法阻止默认行为以及stopPropagation()方法取消事件传播。在实际开发中，您应该根据具体情况选择使用preventDefault()、stopPropagation()或同时使用两个方法。