Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2018-04-10 14:27:43
original
5431 Les gens l'ont consulté

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>
Copier après la connexion

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;
                 } );
Copier après la connexion

Méthode 2 : event.target


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

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

此时的代码确保了被单击的元素是

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!