JQuery中的事件冒泡和阻止事件的传播行为
浏览数：22 /
时间：2015年06月09日
之前的这篇博客详细地介绍了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;
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
