事件冒泡之cancelBubble和stoppropagation的用法和区别
不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。
语法：e.stopPropagation();
参数e：表示事件传递的参数，代表事件的状态。
说明
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
<html>
<head>
<title>冒泡测试</title>
</head>
<body onclick="alert('body');">
<div onclick="clickBtn(event)" style="width:100px;height:100px; background:#666;">
<input id="Button1" type="button" value="button" onclick="alert('btn');" />
</div>
<script language="javascript" type="text/javascript">
function clickBtn(event)
{
event=event?event:window.event;
event.stopPropagation();
alert("OK");
}
</script>
</body>
</html>
虽然说cancelBubble可以在Chrome和Firefox中阻止冒泡，那是因为人家Chrome，Firefox 考虑周到，提供了这么一种可选的方式。 但是，cancelBubble已经不在标准中了，相信迟到它们会移除这一特性的，所以，为了靠谱起见，还是乖乖地该怎么用怎么用吧。
另外，jquery的stopPropagation()已经做了兼容性处理：
阻止js事件冒泡的例子(cancelBubble 、stopPropagation)jQuery.Event.prototype = {
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if ( !e ) {
return;
}
// if stopPropagation exists run it on the original event
if ( e.stopPropagation ) {
e.stopPropagation();
}
// otherwise set the cancelBubble property of the original event to true (IE)
e.cancelBubble = true;
}
}
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;// ie下阻止冒泡
} else {
//e.preventDefault();
e.stopPropagation();// 其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
<!-- 讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。
当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。
这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。
使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。
stopPropagation方法就是起到阻止js事件冒泡的作用
-->
今天来看看前端的冒泡和事件默认事件如何处理
1.event.stopPropagation()方法
这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
2.event.preventDefault()方法
这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
3.return false ；
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
4.我们来看看几组demo，使用jquery进行DOM操作
这是html代码，div里面套了一个a标签，连接到百度
css代码，a标签占父元素的空间的1/4，背景颜色为红色；<div class="box1">
<a href="http://www.baidu.com" target="_blank"></a>
</div>
.box1{
height: 200px;
width: 600px;
margin: 0 auto;
}
.box1 a{
display: block;
height: 50%;
width: 50%;
background：red;
}
下面来看js代码，第一种
//不阻止事件冒泡和默认事件
$(".box1").click(function(){
console.log("1")//不阻止事件冒泡会打印1，页面跳转;
});
第二种
//阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();//不会打印1，但是页面会跳转；
});
$(".box1").click(function(){
console.log("1")
});
第三种
$(".box1 a").click(function(event){
//阻止默认事件
event.preventDefault();//页面不会跳转，但是会打印出1，
})；
$(".box1").click(function(){
console.log("1")；
});
第四种
$(".box1").click(function(){
console.log("1")
});
//阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();
//阻止默认事件
event.preventDefault() //页面不会跳转，也不会打印出1
})
第五种
$(".box1").click(function(){
console.log("1")
});
$(".box1 a").click(function(event){
return false; //页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()和event.preventDefault()
});
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
