e.preventDefault()和e.stopPropagation()之间的区别及返回值false - JavaScript

首先，让我们了解一下e.preventDefault()和e.stopPropagation()两个JavaScript事件处理函数的区别以及它们的返回值。

e.preventDefault()

e.preventDefault()是一个用于阻止事件的默认行为的方法。当事件触发时，浏览器通常会执行与该事件相关联的默认操作，比如点击链接会导航到新的页面，提交表单会刷新页面等。通过调用e.preventDefault()方法，我们可以取消这些默认操作的执行。

一般情况下，当我们需要自定义处理事件时，如通过JavaScript来操纵DOM元素而不是执行默认的浏览器行为时，我们会使用e.preventDefault()。 该方法无需提供任何参数，它被添加到事件处理程序中的事件对象（通常被命名为event或简写为e）上。

返回值：e.preventDefault()没有返回值。

e.stopPropagation()

e.stopPropagation()是一个用于停止事件冒泡的方法。当一个元素上触发一个事件时，该事件会向上冒泡传递到父元素，可能一直传递到文档的根节点。通过调用e.stopPropagation()方法，我们可以阻止事件继续向上冒泡传递。

一般情况下，当我们想要阻止事件冒泡到父元素或其他元素上时，我们会使用e.stopPropagation()。 该方法无需提供任何参数，它被添加到事件处理程序中的事件对象（通常被命名为event或简写为e）上。

返回值：e.stopPropagation()没有返回值。

返回false的作用

在HTML中，常见的是将事件处理程序直接赋值给HTML元素的属性，例如onclick="myFunction()"。在这种情况下，如果事件处理程序函数返回false，它会告诉浏览器取消事件的默认行为（相当于调用e.preventDefault()）并停止事件冒泡（相当于调用e.stopPropagation()）。

因此，当我们在JavaScript中使用上述方法作为事件处理程序时，为了达到与HTML属性相同的效果，我们可以返回false。

以下是一个示例：

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  return false;
});

在上面的示例中，点击<a>元素时，e.preventDefault()和e.stopPropagation()将会阻止链接跳转到新的页面，并且return false也会达到相同的效果。

这就是e.preventDefault()和e.stopPropagation()之间的区别，并通过返回false来实现阻止默认行为和停止事件冒泡的效果。