阻止事件冒泡或捕获
有时会遇到如下情况，本元素和父层元素都有事件，但我们只想要本元素事件激活，即要阻止事件冒泡
HTML:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="clickBtn(event)">Push Me</button>
</body>
<script type="text/javascript">
document.onclick=function(){
alert("body");
}
function clickBtn(event){
event= event ? event : window.event;
alert("button");
event.stopPropagation();
//event.cancelBubble=true;
}
</script>
</html>
cancelBubble
cancelBubble原本是IE独有，经测试发现它也可以在Chrome和Firefox中阻止冒泡，那是因为人家Chrome，Firefox 考虑周到，提供了这么一种可选的方式。 但是，cancelBubble已经不在标准中了，相信迟早它们会移除这一特性的。
DOM的stopPropagation()方法
这是DOM层次的方法，用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。两者的区别为：
IE不支持事件捕获，因而只能取消事件冒泡，但stopPropagation()可以同时取消事件捕获和冒泡。
阻止事件默认行为
下面是一个阻止右键菜单栏事件的小程序1
2
3
4
5
6
7
8
9<script type="text/javascript">
document.oncontextmenu=function(event){
event= event ? event : window.event;
/*下面这三种方法都可以*/
//event.preventDefault();
//event.returnValue=false;
return false;
}
</script>
returnValue=false
也是原本IE的方法，它也可以在它也可以在Chrome和Firefox中阻止事件默认行为。
DOM的preventDefault()方法
简单直观，直接阻止默认的行为，可以用在多个情况。