事件冒泡的概念在此不再重复，下面主要介绍防止事件冒泡的方法：符合W3C标准的event.stopPropagation(); 和IE浏览器下的window.event.cancelBubble=true;
<html>
<head>
<title>stopPropagation阻止冒泡cancelBubble</title>
<style>
body{
color:#333;
font-size:12px;
}
li{
40px;
height:20px;
background: orange;
margin:4px;
}
</style>
<script>
window.onload=function(){
var olia=document.getElementById('lia').getElementsByTagName('li');
var olib=document.getElementById('lib').getElementsByTagName('li');
for(var i=0;i<olia.length;i++)
{
olia[i].onclick=function(){
alert('aaaali');
};
}
for(var i=0;i<olib.length;i++)
{
olib[i].onclick=function(e){
alert('bbbbli');
window.event.cancelBubble=true;//IE /重要代码
e.stopPropagation(); //非IE W3C标准 /重要代码
};
}
document.body.onclick=function(){
alert('bodybody');
};
document.onclick=function(){
alert('document');
};
}
</script>
</head>
<body>
<div id="a">
<ul id="lia">单击下面的列表.会触发body事件
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ul id="lib">单下面的列表.不会触发body事件.
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
</body>
</html>上述代码注释中标注了阻止事件冒泡的方法，下面是针对两种方法的封装：
function stopBubble(e){
//var e=e||window.event;
if(e) //判断是否为非IE浏览器（非IE支持e）
{
e.stopPropagation(); //w3c的stopPropagation()
}
else
{
window.event.cancelBubble=true; //cancelBubble=true
}
}封装后只要在不想冒泡的事件处理函数中调用stopBubble(e) 方法即可:
<script>
window.onload=function(){
var olia=document.getElementById('lia').getElementsByTagName('li');
var olib=document.getElementById('lib').getElementsByTagName('li');
for(var i=0;i<olia.length;i++)
{
olia[i].onclick=function(){
alert('aaaali');
};
}
for(var i=0;i<olib.length;i++)
{
olib[i].onclick=function(e){
alert('bbbbli');
stopBubble(e); //调用封装的组织冒泡函数 即可
//window.event.cancelBubble=true;//IE
//e.stopPropagation(); //非IE W3C标准
};
}
document.body.onclick=function(){
alert('bodybody');
};
document.onclick=function(){
alert('document');
};
function stopBubble(e){
//var e=e||window.event;
if(e) //判断是否为非IE浏览器（非IE支持e）
{
e.stopPropagation(); //w3c的stopPropagation
}
else
{
window.event.cancelBubble=true; //cancelBubble=true
}
}
}
</script>注意千万不要记混淆了这几个单词：IE：window.event.cencelBubble=true; W3C：event.stopPropagation();