preventDefault() 和 stopPropagation() 方法之间的区别

在本文中，我们将通过适当的代码示例介绍 preventDefault() 和 stopPropagation() 方法，然后了解它们的区别。

我们可以在 jQuery 事件处理函数中使用 preventDefault() 和 stopPropagation() 函数。

preventDefault() 停止给定元素的默认浏览器行为。stopPropagation() 函数则停止事件在 DOM 树中的冒泡或传播。

JavaScript 中的 preventDefault() 方法

使用 JavaScript 的 preventDefault() 方法，这是一个存在于 event 接口中的方法。通过使用此技术，可以阻止浏览器执行所选元素的默认操作。只有当事件是可取消的时，此技术才能起作用。滚动和鼠标事件是一些无法避免的事件的例子。

语法

以下语法显示了 JavaScript 如何阻止元素的默认操作。

参数

该函数不接受任何参数。

示例

以下示例演示了阻止元素默认操作。

输出

以下输出显示了使用 JavaScript 阻止的事件。

输出 1

输出 2

JavaScript 中的 stopPropagation() 方法

通过 JavaScript 的 stopPropagation() 事件方法，我们可以阻止父元素接收到事件。此函数旨在停止单个事件的多次传播。

例如，如果一个按钮元素包含在一个 div 标签内，并且它们都有一个 onclick 事件，每当我们尝试激活与按钮元素关联的事件时，与 div 元素关联的事件也会被激活，因为 div 元素是按钮元素的父元素。

语法

以下语法显示了 JavaScript 如何阻止元素的事件传播。

• stopPropagation() 方法可以通过阻止父元素访问事件来解决此问题。

示例

以下示例演示了阻止元素事件传播。

输出

以下输出显示了使用 JavaScript 阻止的事件。

输出 1

输出 2

主要区别

激活时，每个事件处理程序都会显示一个带有文本的警报框，指示哪个元素（div、p 或 a）被点击了。

超链接元素的点击事件处理程序有两种可能的情况：

• 使用 eventObj.preventDefault()

在这种情况下，阻止了默认行为，当我们点击超链接元素时，我们不会被重定向到 TpointTech 网站。但是，由于事件冒泡，我们仍然会看到所有三个通知。

• 使用 eventObj.stopPropagation()

在这种情况下，当点击超链接元素时，默认行为不会被阻止。由于 stopPropagation，我们会被重定向到 TpointTech 网站。我们看不到 div 和 p 标签的信息。

示例

以下示例演示了 preventDefault() 与 stopPropagation() 方法之间的区别。两个链接都用于获取警报框的输出值。第一个链接阻止浏览器跳转到该链接，第二个链接显示警报并跳转到该链接。第一个链接使用了 preventDefault() 方法，第二个链接使用了 stopPropagation() 方法。

输出

以下输出显示了使用 JavaScript 的这两个事件。

输出 1

输出 2

preventDefault() 与 stopPropagation() 方法的区别

结论

event.preventDefault() 方法会停止元素的默认行为。当存在于表单元素中时，它会阻止提交。当用于锚元素时，它会使其无法导航。

当用于上下文菜单时，它会停止显示。而 stopPropagation() 方法则在捕获阶段停止事件的传播或阻止其发生。