标签:jquery事件冒泡 阻止事件传播行为 stoppropagation
之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获,以及DOM事件流。现在我们来看下,JQuery框架中的事件冒泡问题,以及如何阻止事件的传播行为。
1、JQuery中的事件绑定,都是属于事件冒泡。
这篇博客介绍了JQuery中绑定事件处理函数的几种方式,从中可以看到:这几种绑定方式,都不允许我们传递事件类型(是事件冒泡,还是事件捕获)。而javascript原生提供的addEventListener()则允许我们设置事件的类型。
<script> $(function(){ $("#outA").click(function(){ alert("A"); }); $("#outB").click(function(){ alert("B"); }); $("#outC").click(function(){ alert("C"); }); }); </script> <body> <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;"> <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;"> <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> </div> </div> </body>
点击outC的时候,依次打印出C-->B-->A,很明显这是属于事件冒泡。
2、阻止事件传播的2种方式。
方式1:使用event对象的stopPropagation()函数,这种做法与javascript中一致。
$("#outC").click(function(event){ event.stopPropagation(); });
方式2:事件处理函数的返回值false,javascript中的addEventListener没有这个功能。
$("#outC").click(function(event){ return false; });
标签:jquery事件冒泡 阻止事件传播行为 stoppropagation
原文地址:http://blog.csdn.net/aitangyong/article/details/43269793