Comment empêcher efficacement les événements de bouillonner-js tutoriel-php.cn

Comment empêcher efficacement les événements de bouillonner

WBOY

Libérer： 2024-02-19 20:25:05

original

450 Les gens l'ont consulté

Comment empêcher efficacement les événements de bouillonner

Comment empêcher efficacement le bouillonnement d'événements nécessite des exemples de code spécifiques

Le bouillonnement d'événements signifie que lorsqu'un événement sur un élément est déclenché, l'élément parent recevra également le même déclencheur d'événement. Ce mécanisme de transmission d'événements entraînera parfois des problèmes. développement Web, nous devons donc apprendre à empêcher efficacement la propagation d'événements.

En JavaScript, nous pouvons empêcher l'événement de bouillonner en utilisant la méthode stopPropagation() de l'objet événement. Cette méthode peut être appelée dans un gestionnaire d'événements pour empêcher la propagation de l'événement vers l'élément parent. Vous trouverez ci-dessous quelques scénarios courants et des exemples de code correspondants pour montrer comment utiliser la méthode stopPropagation() pour empêcher les événements de se propager.

Scénario 1 : Empêcher l'événement click de l'élément parent lorsque le bouton est cliqué

<!DOCTYPE html>
<html>
  <head>
    <title>阻止事件冒泡</title>
    <style>
      /* 简单的样式用于演示 */
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box" onclick="alert('点击了盒子！')">
      <button onclick="event.stopPropagation(); alert('点击了按钮！')">点击我</button>
    </div>
  </body>
</html>

Copier après la connexion

Dans le code ci-dessus, l'événement click du bouton sera déclenché lorsque le bouton est cliqué, et en raison de l'appel de stopPropagation( ), l'événement click ne peut pas se propager vers l'élément de niveau élément parent. Par conséquent, lorsque vous cliquez sur le bouton, la fenêtre contextuelle « Boîte cliqué ! » ne se déclenchera plus.

Scénario 2 : Empêcher la page de sauter lorsque vous cliquez sur le lien

<!DOCTYPE html>
<html>
  <head>
    <title>阻止事件冒泡</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      /* 简单的样式用于演示 */
      .container {
        width: 300px;
        height: 300px;
        background-color: lightblue;
        padding: 20px;
      }
      .link {
        display: block;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <a href="https://www.example.com" onclick="event.stopPropagation(); alert('点击了链接！')">点击我跳转</a>
    </div>
  </body>
</html>

Copier après la connexion

Dans le code ci-dessus, lorsque vous cliquez sur le lien, l'événement click du lien sera déclenché, et du fait de l'appel du stopPropagation( ), l'événement click ne peut pas se propager à l'élément parent. Ainsi, lorsque vous cliquerez sur le lien, le saut de page ne sera plus déclenché.

Résumé :
En utilisant la méthode stopPropagation(), nous pouvons empêcher les événements de remonter jusqu'à l'élément parent dans un gestionnaire d'événements spécifique. Ceci est utile dans les situations où vous devez gérer les événements de clic sur les éléments enfants individuellement ou empêcher les sauts de page. Espérons que les exemples ci-dessus vous aideront à mieux comprendre comment empêcher efficacement les événements de se déclencher.

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!