cancelBubble在IE下有效 stopPropagation在Firefox下有效
cancelBubble是IE8及以下的浏览器阻止冒泡的一个布尔值类型的属性(非方法),
stopPropagation()是其他标准浏览器和IE9及以上版本IE浏览器的阻止冒泡的一个方法
cancelBubble非标准,逐渐会被淘汰,所以提倡使用stopPropagation()方法,而把cancelBubble只是作为处理兼容性的手段来使用。
<!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> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj。id);
var e=(evt)?evt:window。event;
if (window。event) {
e。cancelBubble=true;
} else {
//e。preventDefault();
e。stopPropagation();
}
}
</script>
</head>
<body>
<p id="parent1" οnclick="alert(this。id)" style="width:250px;background-color:yellow">
<p>This is parent1 p。</p>
<p id="child1" οnclick="alert(this。id)" style="width:200px;background-color:orange">
<p>This is child1。</p>
</p>
<p>This is parent1 p。</p>
</p>
<br />
<p id="parent2" οnclick="alert(this。id)" style="width:250px;background-color:cyan;">
<p>This is parent2 p。</p>
<p id="child2" οnclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2。 Will bubble。</p>
</p>
<p>This is parent2 p。</p>
</p>
</body>
</html>
function(ev)
{
var ev = ev || window。event;
if( ev。stopPropagation )
{
ev。stopPropagation();
}
else
{
ev。cancelBubble = true;
}
}