JavaScript中的stopPropagation方法有什麼用-js教程-PHP中文網

首頁

web前端

js教程

JavaScript中的stopPropagation方法有什麼用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 05:05 PM

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 id="Let-us-understand-the-stopPropagation-Method">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。”

以上是JavaScript中的stopPropagation方法有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。