阻止事件冒泡
W3C的方法是ev.stopPropagation()，IE则是使用ev.cancelBubble = true。
先不谈IE的私有方法，首先讨论一个问题：ev.stopPropagation()真的是阻止事件冒泡吗？
实际上，这个问题需要分两种情况来讨论：
- DOM0的阻止冒泡事件 还是同心圆的例子，代码如下。 JavaScript：
var div = document.querySelector("div");
var ul = document.querySelector("ul");
var li = document.querySelector("li");
div.onclick = function(ev){
console.log("div");
}
ul.onclick = function(ev){
console.log("ul");
}
li.onclick = function(ev){
console.log("li");
ev.stopPropagation();
}
复制代码此时输出结果如下：
- DOM2的阻止冒泡事件 还是同心圆的例子，代码如下：
var div = document.querySelector("div");
var ul = document.querySelector("ul");
var li = document.querySelector("li");
div.addEventListener('click',function(){
console.log("div 捕获");
},true);
ul.addEventListener('click',function(ev){
console.log("ul 捕获");
},true);
li.addEventListener('click',function(ev){
console.log("li 捕获");
},true);
div.addEventListener('click',function(ev){
console.log("div 冒泡");
});
ul.addEventListener('click',function(ev){
console.log("ul 冒泡");
});
li.addEventListener('click',function(ev){
console.log("li 冒泡");
});
复制代码此时点击内层圆，输出结果如下：
ul.addEventListener('click',function(ev){
console.log("ul 冒泡");
});
复制代码改为
ul.addEventListener('click',function(ev){
console.log("ul 冒泡");
ev.stopPropagation();
});
复制代码此时点击内层圆，输出结果如下：
ul.addEventListener('click',function(ev){
console.log("ul 捕获");
},true);
复制代码改为
ul.addEventListener('click',function(ev){
console.log("ul 捕获");
ev.stopPropagation();
},true);
复制代码此时的输出结果如下：
所以总结一下这两点，ev.stopPropagation()不止可以阻止事件冒泡，如果在捕获阶段使用还可以阻止事件捕获。
那么我们再考虑一种特殊情况：如果ev.stopPropagation()在target阶段执行会是什么情况，代码如下。 JavaScript：
div.addEventListener('click',function(){
console.log("div 捕获");
},true);
ul.addEventListener('click',function(ev){
console.log("ul 捕获");
},true);
li.addEventListener('click',function(ev){
console.log("li 捕获");
ev.stopPropagation();
},true);
div.addEventListener('click',function(ev){
console.log("div 冒泡");
});
ul.addEventListener('click',function(ev){
console.log("ul 冒泡");
});
li.addEventListener('click',function(ev){
console.log("li 冒泡");
});
复制代码我们在target上阻止了事件监听，这样整个事件冒泡应该是被阻止的，我们看输出结果：
阻止事件冒泡的兼容写法：
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
复制代码阻止默认事件
这个没什么好讲的，用于阻止浏览器默认的事件，比如提交按钮的点击默认提交，a标签的点击跳转等。不过之前遇到过一个问题，在jsp里无法阻止提交按钮的提交事件，最后还是换成了div然后使用form.submit()提交才通过。
兼容写法如下：
if(event.preventDefault){
// W3C的阻止默认事件
event.preventDefault();
}else{
// IE私有的阻止默认事件
event.returnValue = false;
}
复制代码事件流的常见应用：事件委托
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
阻止事件冒泡应用
有一个很应景的例子，页面有一个弹出框，可拖拽，弹出框内有一个input框，这个框内输入的文字要可以选中。 我们先来实现页面结构和拖拽功能，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 300px;
height: 100px;
background-color: #2578b5;
box-sizing: border-box;
padding: 30px;
}
input{
width: 100%;
line-height: 1.6em;
font-size: 16px;
}
</style>
</head>
<body>
<div>
<input type="text" value="用于复制的文本">
</div>
<script>
var div = document.querySelector('div');
var input = document.querySelector('input');
div.onmousedown = function(ev){
var mouseLeftDiv = ev.clientX - div.offsetLeft;
var mouseTopDiv = ev.clientY - div.offsetTop;
document.onmousemove = function(ev){
var divLeftBody = ev.clientX - mouseLeftDiv;
var divTopBody = ev.clientY - mouseTopDiv;
var docWidth = document.documentElement.clientWidth;
var docHeight = document.documentElement.clientHeight;
if(divLeftBody <= 0){
divLeftBody = 0;
}else if(divLeftBody >= docWidth - div.offsetWidth){
divLeftBody = docWidth - div.offsetWidth;
};
if(divTopBody <= 0){
divTopBody = 0;
}else if(divTopBody >= docHeight - div.offsetHeight){
divTopBody = docHeight - div.offsetHeight;
};
div.style.left = divLeftBody + 'px';
div.style.top = divTopBody + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>
复制代码此时页面如下：
这时我们的阻止事件冒泡就起作用了，我们在input框上阻止mousedown事件冒泡到外层，代码如下： JavaScript：
input.onmousedown = function(ev){
ev.stopPropagation();
}
复制代码大功告成，此时既可以复制文本，外层又可以拖拽。
参考资料： http://www.cnblogs.com/liugang-vip/p/5616484.html http://www.cnblogs.com/libin-1/p/6368323.html
