本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下

一、冒泡事件简介

当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。

方法一:event.stopPropagation( );

例如:


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

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; } );

方法二: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'); } }) })

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

相关推荐:

js阻止事件追加的具体实现方法

js阻止冒泡和默认事件(默认行为)详解

JS阻止用户多次提交示例代码_javascript技巧

以上就是js阻止事件冒泡的两种方法 的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码