Heim > Artikel > Web-Frontend > Wozu dient die stopPropagation-Methode in JavaScript?

Wozu dient die stopPropagation-Methode in JavaScript?

WBOYnach vorne: 2023-08-24 17:05:06661Durchsuche

In diesem Artikel wird die Methode stopPropagation() zusammen mit nützlichen Codebeispielen vorgestellt. Danach werden wir den Unterschied zwischen den Methoden stopPropagation() und PreventDefault() verstehen.

stopPropagation()-Ereignismethode – Übergeordnete Elemente können mit dieser Methode nicht auf Ereignisse zugreifen Verfahren. Im Allgemeinen wird diese Funktion erstellt, um mehrere Aufrufe desselben Ereignisses zu verhindern verbreiten. Wenn beispielsweise ein Schaltflächenelement in einem div-Tag enthalten ist und beide ein haben onclick-Ereignis, wann immer wir versuchen, das mit dem Schaltflächenelement verknüpfte Ereignis zu aktivieren, Das mit dem div-Element verknüpfte Ereignis wird ebenfalls ausgelöst, da das div-Element tatsächlich vorhanden ist Schaltflächenelement.

Grammatik

event.stopPropagation();

Die Methode

stopPropagation() blockiert das übergeordnete Zugriffsereignis und kann verwendet werden Lösen Sie dieses Problem.

Beispiel 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>

Nachdem Sie auf das äußere Div „mein zweiter DIV(2)“ geklickt haben, wird das Bestätigungsfeld nur einmal angezeigt, wie unten gezeigt.

Wenn Sie außerdem auf das innere Div „mein erster DIV(1)“ klicken, wird das Bestätigungsfeld zweimal angezeigt, wie unten gezeigt.

Als nächstes erscheint nach dem Klicken auf die Schaltfläche „OK“ das äußere Div-Bestätigungsfeld „Mein zweiter DIV(2)“.

Aktivieren Sie einfach ein Kontrollkästchen und klicken Sie auf das innere Div „mein erster DIV(1)“. Screenshot unten. Das Bestätigungsfeld erscheint nur einmal.

Beispiel 2

Lassen Sie uns in diesem Beispiel verstehen, wie die Methode event.stopPropagation() implementiert ist. Dadurch wird eine einzelne Funktion auf dem Schaltflächenelement ausgeführt.

<!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()-Methode – Dies ist die Methode, die in der Ereignisschnittstelle gefunden wird. Durch die Verwendung dieser Methode Verhindert, dass der Browser die Standardaktion für das ausgewählte Element ausführt. nur wenn Sofern die Technik dazu in der Lage ist, ist die Veranstaltung abgesagt. Dies sind beispielsweise die Scroll- und Wheel-Ereignisse Einige Beispiele für unvermeidbare Ereignisse.

Grammatik

preventDefault() Method

Beispiel 3

In diesem Beispiel erfahren Sie, wie Sie verhindern, dass ein Link der URL folgt, sodass er für den Browser nicht zugänglich ist Besuchen Sie eine andere Seite.

<!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>

Klicken Sie auf den Link und Sie sehen ein Bestätigungsfeld mit der Meldung „Diese Veranstaltung wurde blockiert und Sie können nicht auf die URL zugreifen.“

Das obige ist der detaillierte Inhalt vonWozu dient die stopPropagation-Methode in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 接口 Event 事件

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich den Zoom-Multiplikator in der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS ein?Nächster Artikel：Wie stelle ich den Zoom-Multiplikator in der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen