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

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>

// 为所有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 （同类型的事件）  
} );

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(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

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!

JavaScript jquery Event JS 对象 事件 dom this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn