首頁 >web前端 >js教程 >如何使用 JavaScript 中的內嵌 onclick 屬性停止事件傳播？

如何使用 JavaScript 中的內嵌 onclick 屬性停止事件傳播？

WBOY轉載: 2023-09-11 12:05:08772瀏覽

如何使用 JavaScript 中的内联 onclick 属性停止事件传播？

有時，我們需要在巢狀的 HTML 元素上新增相同的事件。例如，我們有兩個div，一個是父親div，另一個是子div。現在，我們需要在父div和子div上新增onclick事件，並在使用者點擊父div和子div時執行不同的功能。在這種情況下，它將始終在父 div 和子 div 上執行事件。

讓我們透過下面的範例了解如何在巢狀 HTML 元素上執行相同的事件。

範例

在下面的範例中，我們建立了兩個 div。我們為外部 div 指定了「parent-div」類別名稱，為內部 div 指定了「child-div」類別名稱。

此外，我們還新增了 onclick 事件，在兩個 div 元素上執行不同的功能。當使用者點擊內部div時，父div中也會觸發點擊事件。

<html>
<head>
   <style>
      .parent-div {
         width: 300px;
         height: 150px;
         margin: 50px;
         padding: 10px;
         background-color: lightblue;
      }
      .child-div {
         width: 100px;
         height: 70px;
         margin: 30px; 
         padding: 10px;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <h3>Adding the same events <i> to nested HTML elements </i> in JavaScript</h3>
   <p>Click on the below parent & child DIVs to see the result</p>
   <div class = "parent-div" onclick = "executeParent()"> Parent DIV
      <div class = "child-div" onclick = "executeChild()"> Child DIV </div>
   </div>
   <div id="content"> </div>
   <script>
      let content = document.getElementById("content");
      function executeParent() {
         content.innerHTML += "Parent div clicked <br>";
      }
      function executeChild() {
         content.innerHTML += "Child div clicked <br>";
      }
   </script>
</body>
</html>

我們需要使用事件來解決上述問題，例如點擊子div，呼叫父div的click事件.stopPropogation()方法。

文法

使用者可以按照下面的語法使用 stopPropgation() 方法來停止向父元素傳播事件。

Event.stopPropogation();

範例

在下面的範例中，我們在 HTML

標記內添加了一些文本，並在執行executeP() 函數的 onclick 事件中添加了一些文本。此外，我們在

標籤內新增了一個標籤，並在執行executeSpan() 函數的span 標籤上新增了「onclick」事件。

此外，我們還使用了 event.stoPropogation() 方法和元素的 onclick 事件，以在使用者點擊時停止在

標記上傳播事件。

在輸出中，使用者可以觀察到當他們點擊元素的文字時，它只執行executeSpan()函數。

<html>
<body>
   <h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3> 
   <p style = "cursor: pointer;" onclick="executeP()"> Hello users! How are you? <span Onclick = "event.stopPropagation(); executeSpan();"> Child Span </span> </p>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById("content");
      function executeP() {
         content.innerHTML += "Clicked on the p element. <br>";
      }
      function executeSpan() {
         content.innerHTML += "Clicked on the Span element! <br>";
      }
   </script>
</body>
</html>

範例

在下面的範例中，我們使用 HTML 標籤建立了三個巢狀元素的層次結構。我們在每個元素上新增了 onclick 事件。如果我們不使用event.stopPropogation()方法，它總是執行firstDivClick()函數。

為了解決這個問題，我們在呼叫它們時將事件作為函數的參數傳遞，並在函數內使用 stopPropogation() 方法。

使用者可以觀察到，當他們點擊「選單」文字時，它只執行 kebabMenuClick() 函數。當使用者按一下第二個 div 時，它只執行 secondaryDivClick() 函數。

<html>
<head>
   <style>
      .card-1 {
         width: 300px;
         height: 200px;
         background-color: red;
         cursor: pointer;
      }
      .card-2 {
         width: 200px;
         height: 150px;
         background-color: blue;
         cursor: pointer;
      }
      .kebab-menu {
         font-size: 1.2rem;
         color: white;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
   <div class = "card-1" onclick = "firstDivClick(event)">
      <div class = "card-2" onclick = "secondDivClick(event)">
         <div class = "kebab-menu" onclick = "kebabMenuClick(event)"> Menu </div>
      </div>
   </div>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById("content");
      function firstDivClick(event) {
         content.innerHTML += "first div clicked <br>";
      }
      function secondDivClick(event) {
         event.stopPropagation();
         content.innerHTML += "second div clicked <br>";
      }
      function kebabMenuClick(event) {
         event.stopPropagation();
         content.innerHTML += "kebab menu clicked <br>";
      }
   </script>
</body>
</html>

使用者學會了對事件使用 event.stopPorpogation() 方法。基本上，它用於阻止事件傳播到父元素。這樣，當同一個事件觸發父子元素時，我們就可以為所有子元素執行不同的函數。

以上是如何使用 JavaScript 中的內嵌 onclick 屬性停止事件傳播？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html Event 事件

陳述：

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

上一篇：如何使用 FabricJS 設定矩形控制角的顏色？下一篇：如何使用 FabricJS 設定矩形控制角的顏色？

看更多