recherche

Maison  >  Article  >  interface Web  >  Quelle est l'utilisation de la méthode stopPropagation en JavaScript

Quelle est l'utilisation de la méthode stopPropagation en JavaScript

WBOY
WBOYavant
2023-08-24 17:05:06697parcourir

Quelle est lutilisation de la méthode stopPropagation en JavaScript

Cet article présentera la méthode stopPropagation() ainsi que des exemples de code utiles. Après cela, nous comprendrons la différence entre les méthodes stopPropagation() et PreventDefault().

Méthode d'événement stopPropagation() - Les éléments parents ne peuvent pas accéder aux événements en utilisant cette méthode méthode. D'une manière générale, cette fonction est créée pour empêcher plusieurs appels au même événement propagé. Par exemple, si un élément bouton est contenu dans une balise div et qu'ils ont tous deux un événement onclick, chaque fois que nous essayons d'activer l'événement associé à l'élément bouton, L'événement associé à l'élément div sera également déclenché car l'élément div est bien Élément de bouton.

Grammaire

event.stopPropagation();
La méthode

stopPropagation() bloquera l'événement d'accès parent et peut être utilisée Résolvez ce problème.

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

Après avoir cliqué sur le div externe "mon deuxième DIV(2)", la boîte de confirmation n'apparaît qu'une seule fois, comme indiqué ci-dessous.

De plus, si vous cliquez sur le div interne « mon premier DIV(1) », la boîte de confirmation apparaîtra deux fois comme indiqué ci-dessous.

Ensuite, après avoir cliqué sur le bouton OK, la boîte de confirmation du div externe "My Second DIV(2)" apparaîtra.

Cochez simplement une case et cliquez sur le div interne "mon premier DIV (1)" comme Capture d'écran ci-dessous. La boîte de confirmation n'apparaît qu'une seule fois.

Exemple 2

Dans cet exemple, comprenons comment la méthode event.stopPropagation() est implémentée, Cela entraînera l’exécution d’une seule fonction sur l’élément bouton. 

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

MéthodepreventDefault() - C'est la méthode trouvée dans l'interface des événements. En utilisant cette méthode, Empêche le navigateur d'effectuer l'action par défaut pour l'élément sélectionné. seulement si Si la technologie est capable de le faire, l’événement est annulable. Par exemple, les événements scroll et wheel sont Quelques exemples d'événements incontournables.

Grammaire

preventDefault() Method

Exemple 3

Comprenons comment empêcher un lien de suivre l'URL dans cet exemple afin qu'il soit inaccessible au navigateur Visitez une autre page. 

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

Cliquez sur le lien et vous verrez une boîte de confirmation indiquant "Cet événement a été bloqué et vous ne pouvez pas accéder à l'URL

."

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript 接口 Event 事件
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment définir le multiplicateur de zoom dans la chaîne URL d'un objet IText à l'aide de FabricJS ?Article suivant：Comment définir le multiplicateur de zoom dans la chaîne URL d'un objet IText à l'aide de FabricJS ?

Articles Liés

Voir plus