JavaScript 中 preventDefault() 和 stopPropagation() 方法的区别

在 JavaScript 中，我们常常需要处理事件。事件可以是用户的交互操作，例如点击、滚动，也可以是文档的加载和改变。当事件被触发时，它会冒泡或者捕获到文档的根节点，我们可以使用 event.preventDefault() 和 event.stopPropagation() 方法来阻止事件的默认行为和停止事件的传播。

preventDefault()

preventDefault() 方法是阻止事件的默认操作。默认操作通常是文档的行为，例如点击链接跳转到新页面或提交表单。当事件被触发时，prevenDefault() 方法可以阻止事件的默认操作执行。

语法

event.preventDefault()

参数

preventDefault() 方法没有参数。

示例

以下示例阻止了点击链接时的默认操作：

<a href="https://www.google.com" onclick="event.preventDefault()">Google</a>

在这个示例中，点击链接不会跳转到 Google 页面，而是什么也不发生。

stopPropagation()

stopPropagation() 方法是停止事件的传播。事件会自动冒泡到文档的根节点，也可能被捕获到子节点。stopPropagation() 方法可以停止事件继续冒泡或捕获。

语法

event.stopPropagation()

参数

stopPropagation() 方法没有参数。

示例

以下示例停止了事件的冒泡：

<div onclick="alert('div被点击了。');">
  <a onclick="alert('链接被点击了。'); event.stopPropagation();" href="#">Link</a>
</div>

在这个示例中，当点击链接时，链接的点击事件会被处理，但是不会继续冒泡到 div 上。所以，alert('div被点击了。')不会被执行。