Maison > Article > interface Web > Comment arrêter la propagation des événements à l'aide de l'attribut onclick en ligne en JavaScript ?

Comment arrêter la propagation des événements à l'aide de l'attribut onclick en ligne en JavaScript ?

WBOYavant: 2023-09-11 12:05:08745parcourir

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

Parfois, nous devons ajouter le même événement sur des éléments HTML imbriqués. Par exemple, nous avons deux div, l’un est le div parent et l’autre est le div enfant. Maintenant, nous devons ajouter des événements onclick sur les divs parent et enfant et exécuter différentes fonctions lorsque l'utilisateur clique sur les divs parent et enfant. Dans ce cas, il exécutera toujours l’événement sur les divs parent et enfant.

Voyons comment effectuer le même événement sur des éléments HTML imbriqués avec l'exemple suivant.

Exemple

Dans l'exemple ci-dessous, nous avons créé deux divs. Nous avons donné au div externe le nom de classe « parent-div » et au div interne le nom de classe « child-div ».

De plus, nous avons également ajouté un événement onclick pour exécuter différentes fonctions sur les deux éléments div. Lorsque l'utilisateur clique sur le div interne, l'événement click est également déclenché dans le div parent.

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

Nous devons utiliser des événements pour résoudre les problèmes ci-dessus, comme cliquer sur un div enfant et appeler la méthode click event.stopPropogation() du div parent.

Grammaire

Les utilisateurs peuvent utiliser la méthode stopPropgation() selon la syntaxe suivante pour arrêter la propagation des événements vers l'élément parent.

Event.stopPropogation();

Exemple

Dans l'exemple ci-dessous, nous avons ajouté du texte à l'intérieur de la balise HTML

et ajouté du texte dans l'événement onclick qui exécute la fonction executeP(). De plus, nous avons ajouté une balise

à l'intérieur de la balise et ajouté un événement "onclick" sur la balise span qui exécute la fonction executeSpan().

De plus, nous avons utilisé la méthode event.stoPropogation() avec l'événement onclick de l'élément pour arrêter la propagation des événements sur la balise lorsque l'utilisateur clique sur

Dans la sortie, l'utilisateur peut observer que lorsqu'il clique sur le texte de l'élément , il exécute uniquement la fonction 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>

Exemple

Dans l'exemple ci-dessous, nous avons créé une hiérarchie de trois éléments imbriqués à l'aide du balisage HTML. Nous avons ajouté un événement onclick sur chaque élément. Si nous n'utilisons pas la méthode event.stopPropogation(), elle exécute toujours la fonction firstDivClick().

Pour résoudre ce problème, nous passons les événements comme paramètres de la fonction lors de leur appel et utilisons la méthode stopPropogation() à l'intérieur de la fonction.

L'utilisateur peut constater que lorsqu'il clique sur le texte du Menu, il exécute uniquement la fonction kebabMenuClick(). Lorsque l'utilisateur clique sur le deuxième div, il exécute simplement la fonction secondaireDivClick().

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

Les utilisateurs ont appris à utiliser la méthode event.stopPorpogation() sur les événements. Fondamentalement, il est utilisé pour empêcher les événements de se propager à l'élément parent. De cette façon, lorsque le même événement déclenche un élément parent-enfant, nous pouvons exécuter différentes fonctions pour tous les éléments enfants.

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 html 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 la couleur des coins de contrôle d'un rectangle à l'aide de FabricJS ?Article suivant：Comment définir la couleur des coins de contrôle d'un rectangle à l'aide de FabricJS ?

Articles Liés

Voir plus