Deux façons d'empêcher la propagation d'événements en JavaScript-js tutoriel-php.cn

Deux façons d'empêcher la propagation d'événements en JavaScript

yulia

Libérer： 2018-09-13 16:47:35

original

1676 Les gens l'ont consulté

1. Qu'est-ce que le bouillonnement d'un événement JS ?

Déclenchez un certain type d'événement (tel qu'un événement click onclick) sur un objet si cet objet définit le gestionnaire d'événement. , alors cet événement appellera ce gestionnaire. Si ce gestionnaire d'événements n'est pas défini ou si l'événement renvoie vrai, alors cet événement se propagera à l'objet parent de cet objet, de l'intérieur vers l'extérieur, jusqu'à ce qu'il soit traité (parent Tous les événements similaires de l'objet sera activé), ou il atteint le niveau supérieur de la hiérarchie des objets, qui est l'objet document (fenêtre dans certains navigateurs).

2. Méthode d'arrêt

Méthode 1 : event.stopPropagation()

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

Copier après la connexion

// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-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和div的click （同类型的事件）  
} );

Copier après la connexion

Méthode 2 : event.target

Maintenant, la variable event dans le gestionnaire d'événements contient l'objet événement. L'attribut event.target stocke l'élément cible où l'événement s'est produit. Cet attribut est spécifié dans l'API DOM, mais n'est pas implémenté par tous les navigateurs. jQuery apporte les extensions nécessaires à cet objet événement afin que cette propriété puisse être utilisée dans n'importe quel navigateur. Avec .target, vous pouvez déterminer l'élément du DOM qui a reçu l'événement en premier (c'est-à-dire l'élément sur lequel on a réellement cliqué). De plus, nous savons que cela fait référence à l'élément DOM qui gère l'événement, nous pouvons donc écrire le code suivant :

$(document).ready(function(){
 $(&#39;#switcher&#39;).click(function(event){
  $(&#39;#switcher .button&#39;).toggleClass(&#39;hidden&#39;);
  })
 })  
$(document).ready(function(){
 $(&#39;#switcher&#39;).click(function(event){
  if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
  $(&#39;#switcher .button&#39;).toggleClass(&#39;hidden&#39;);
  }
  })
 })

Copier après la connexion

Le code à ce moment garantit que l'élément cliqué est

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!