Deux façons d'empêcher les événements de se propager dans js

Le contenu de cet article concerne deux méthodes pour empêcher le bouillonnement d'événements en js. Les amis dans le besoin peuvent s'y référer

1 Introduction aux événements bouillonnants

. Lorsque nous cliquons sur un contrôle, si le contrôle parent incluant ce contrôle a également un événement click, l'exécution continuera.

Méthode 1 : event.stopPropagation( );

Par exemple :

<p>    <p>段落文本内容
        <input type="button" value="点击" />    </p></p>

code html :

// 为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
    } );
    //为所有p元素绑定click事件
    $("p").click( function(event){
        alert("p-click");
        } );
        //为所有button元素绑定click事件
        $(":button").click( function(event){
            alert("button-click");    
            // 阻止事件冒泡到DOM树上
                event.stopPropagation(); 
              // 只执行button的click，如果注释掉该行，将执行button、p和p的clic；
                 } );

Méthode 2 : event.target

现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写下列代码：

$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })
  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

此时的代码确保了被单击的元素是6e08cffd95166ffdf6670c2c330eceed ，而不是其他后代元素。现在，单击按钮不会再折叠样式转换器，而单击边框则会触发折叠操作。但是，单击标签同样什么也不会发生，因为它也是一个后代元素。实际上，我们可以不把检查代码放在这里，而是通过修改按钮的行为来达到目标 。

Recommandations associées :

La méthode d'implémentation spécifique de js empêchant l'ajout d'événements

JS empêche les événements de bouillonnement et par défaut (comportement par défaut) explication détaillée

JS empêche les utilisateurs de soumettre plusieurs exemples de code_compétences javascript

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!