在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的冒泡事件触发机制,所以会触发你不想触发的事件,那么通过如下的函数可以解决这个问题(兼容IE和FF)。
1、阻止事件冒泡,使其成为捕获型事件触发机制
function stopBubble(e){
if(e && e.stopPropagation){ //非IE
e.stopPropagation();
}else{
window.event.cancelBubble = ture; //IE方式取消事件冒泡
}
}
比如:
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td><span>冒泡事件测试</span></td>
</tr>
</table>
<script type="text/javascript">
$(function () {
$("table").click(function () { alert("table alert"); });
$("td").click(function () { alert("td alert"); });
$("span").click(function (){
alert("span alert");
//e.stopPropagation();
});
});
</script>
</body>
这时候我们会看到这样的情况:span alert -> td alert -> table alert三个元素绑定的事件依次触发。这就叫事件冒泡。就是从下到上,从里到外,事件依次触发。要想阻止阻止事件冒泡只需在该函数中添加 e.stopPropagation 方法。
2、阻止默认行为、取消默认动作
function stopDefault(){
if(e && e.preventDefault){ //非IE
e.preventDefault();
}else{ //IE
window.event.returnValue = false;
}
}
附: return false等效于同时调用e.preventDefault()和e.stopPropagation();