本文将介绍 stopPropagation() 方法以及有用的代码示例。 之后，我们将了解 stopPropagation() 和 PreventDefault() 方法之间的区别。
stopPropagation() 事件方法 - 父元素无法使用此方法访问事件 方法。一般来说，创建此函数是为了防止多次调用同一事件 传播。例如，如果一个按钮元素包含在 div 标签内，并且它们都有一个 onclick 事件，每当我们尝试激活与按钮元素关联的事件时， 与 div 元素关联的事件也会被激活，因为该 div 元素确实是 按钮元素。
语法
event.stopPropagation();
stopPropagation() 方法将阻止父级访问事件，可用于 解决这个问题。
示例 1
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
padding: 50px;
background-color: rgba(10, 111, 134, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<h1>Let us understand the stopPropagation() Method</h1>
<p>Test the results by clicking the DIV(1) & DIV(2) as shown below in the color boxes:</p>
<div onclick="myFunction2()">This is my Second DIV(2)
<div onclick="myFunction1(event)">This is my First DIV(1)</div>
</div>
Check to stop propagation event:
<input type="checkbox" id="check">
<p></p>
<p>Because my First DIV(1) is inside Second DIV(2), both DIVs get clicked when you click on First DIV(1).
</p>
<p>You can test it by check and uncheck the stop propagation checkbox, to get the outcome.</p>
<p>You can stop the current event from propagating by using the stopPropagation() method.</p>
<script>
function myFunction1(event) {
alert("My First DIV(1)");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function myFunction2() {
alert("My Second DIV(2)");
}
</script>
</body>
</html>
单击外部 div“my Second DIV(2)”后，确认框仅显示一次，如下所示。
此外，如果单击内部 div“my First DIV(1)”，确认框将显示两次，如下所示。
接下来，单击“确定”按钮后，将显示外部 div“我的第二个 DIV(2)”确认框。
只要选中一个复选框并单击内部 div“my First DIV(1)”，如 截图如下。确认框仅出现一次。
示例 2
在这个例子中，让我们了解 event.stopPropagation() 方法是如何实现的， 这将导致执行按钮元素的单个函数。
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
div {
padding: 50px;
background-color: rgba(63, 65, 45, 0.2);
text-align: center;
}
</style>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<h3>The button element's single function will be executed with stopPropagation() Method
</h3>
<p>Test the result by clicking the button as shown below in the color boxe:</p>
<div class="first" onclick="functionFirst()">
<button type="button" class="btn btn-success btn-lg" onclick="functionSecond()">
Button
</button>
</div>
<p></p>
<script>
function functionSecond() {
event.stopPropagation();
alert("This is my First DIV(1)");
}
function functionFirst() {
alert("This is my Second DIV(2)");
}
</script>
</body>
</html>
preventDefault() 方法 - 这是在事件接口中找到的方法。通过使用这种方法， 阻止浏览器执行所选元素的默认操作。仅当 如果该技术能够做到这一点，则事件是可取消的。例如，滚动和滚轮事件是 一些无法避免的事件的例子。
语法
preventDefault() Method
示例 3
让我们了解如何阻止链接跟随此示例中的 URL，以便浏览器无法访问 访问另一个页面。
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Using jquery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<a id="myLink" href="www.tutorialspoint.com">
Welcome to Tutorialspoint!
</a>
<script>
$("#myLink").click(function() {
event.preventDefault();
alert("This event is prevented, you can't visit the URL.");
});
</script>
</body>
</html>
单击该链接，您将看到确认框，显示“此事件已被阻止，您无法访问该 URL。”
立即学习“Java免费学习笔记（深入）”；
