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

在本文中，我们将使用适当的代码示例介绍preventDefault()和stopPropagation()方法的使用情况，并且我们将看到它们之间的区别。

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

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

preventDefault()方法在JavaScript中的使用

使用javascript的preventDefault()方法，它是在事件接口中找到的一种方法。通过使用这种技术，可以阻止浏览器执行所选元素的默认操作。只有当事件可取消时，此技术才能实现。滚动和鼠标事件就是一些无法避免的示例。

语法

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

event.preventDefault();

参数：

该函数不接受任何参数。

示例：

下面的示例展示了该动作的预防元素。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript's preventDefault() method </title>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h3> JavaScript's preventDefault() method </h3>
<input type="checkbox" id="demo1" />
click on the checkbox
<script>
$("#demo1").click(function () {
event.preventDefault();
alert("JavaScript Event is prevented");
});
</script>
</body>
</html>

输出

下面的输出显示了使用JavaScript防止的事件。

输出1

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

输出2

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

JavaScript中的stopPropagation()方法

使用JavaScript的stopPropagation()事件方法，我们可以阻止父元素获取事件。该函数的设计目的是防止单个事件的多次调用传播。

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

语法

以下语法显示了javascript停止元素行动的方法。

event.stopPropagation();

stopPropagation() 方法可以通过阻止父级访问事件来解决这个问题。

示例

下面的示例展示了停止动作的 stop 元素。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript's stopPropagation() method </title>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h3> JavaScript's stopPropagation() method </h3>
<input type="checkbox" id="demo1" />
click on the checkbox
<script>
$("#demo1").click(function () {
event.stopPropagation();
alert("JavaScript Event is stopped");
});
</script>
</body>
</html>

输出

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

输出1

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

输出2

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

关键区别

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

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

使用eventObj.preventDefault()

在这种情况下，停止了通常的行为，当点击超链接元素时，我们没有被转发到javatpoint网站。但是，由于事件传播，我们仍然会看到所有三个通知。

使用eventObj.stopPropagation()

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

示例

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

<!DOCTYPE html>
<html lang = "en">
<head>
<title> difference between preventDefault() vs stopPropagation()  Methods </title>
<!-- Using jquery library -->
<script src =
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p> difference between preventDefault() vs stopPropagation()  Methods </p>
<div id = "parent_data">
  <a id = "child_data" href="https://www.javatpoint.com" target = "_blank"> JavaTpoint </a>
</div>
<div id = "parent_data1">
  <a id = "child_data1" href="https://www.javatpoint.com" target = "_blank"> JavaTpoint </a>
</div>
<script>
var child_var = document.getElementById("child_data");
// The user cannot leave the website after clicking the link.
child_var.onclick = function(e) { 
  e.preventDefault();
  alert('method prevented a given link from opening to the browser'); 
};
//click the parent node may execute the terminal statement Because of event propagation.
child_var.parentNode.onclick = function(e) { 
  alert(' Clicked on the child element!'); 
};
var child_var1 = document.getElementById("child_data1");
// Click the element will stop propagation but let the default action happen.
child_var1.onclick = function(e) { 
  e.stopPropagation();
  alert('Stop Link! no bubbles but open the link!'); 
};
// This message won't be seen because the child halted propagation!
child_var1.parentNode.onclick = function(e) { 
 alert('we cannot see the required message!'); 
};
</script>
</body>
</html>

输出

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

输出1

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

输出2

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

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

Javascript event.preventDefault() 方法	Javascript event.stopPropagation() 方法
阻止浏览器在该事件上的默认行为。	阻止当前事件被父级或子级元素继续传播。
这是一个在 Event 接口中提供和显示的 JavaScript 方法。	这也是一个在 Event 接口中提供的 JavaScript 方法。
例如，它阻止浏览器给出或要求链接。	它无法拦截给定链接的浏览器默认行为。
此方法不需要任何输入参数。	此方法也不需要任何输入参数来运行。
Chrome、safari、firefox、opera和其他浏览器都支持这种方法。	Chrome、safari、firefox、opera和其他浏览器都支持这种方法。
它不显示任何值作为输出。	它不显示任何值作为输出。
它适用于 Level 3 Events 的 DOM 版本。	它适用于 Level 2 Events 的 DOM 版本。