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'); } }) })
此时的代码确保了被单击的元素是
Recommandations associées :
La méthode d'implémentation spécifique de js empêchant l'ajout d'événements
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!