資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript 中 stopPropagation 方法有什麼作用？
本文將介紹 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 “my Second 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”。
更新於: 2022年12月12日
546 次瀏覽
廣告