本文將介紹 stopPropagation() 方法以及有用的程式碼範例。 之後,我們將了解 stopPropagation() 和 PreventDefault() 方法之間的差異。
stopPropagation() 事件方法 - 父元素無法使用此方法存取事件 方法。一般來說,建立此函數是為了防止多次呼叫相同事件 傳播。例如,如果一個按鈕元素包含在 div 標籤內,並且它們都有一個 onclick 事件,每當我們嘗試啟動與按鈕元素關聯的事件時, 與 div 元素關聯的事件也會被激活,因為該 div 元素確實是 按鈕元素。
event.stopPropagation();
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"> <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)”,如 截圖如下。確認框僅出現一次。
在這個範例中,讓我們來了解 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
讓我們了解如何阻止連結跟隨此範例中的 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。”
以上是JavaScript中的stopPropagation方法有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!