首页 > 代码库 > javascript阻止事件冒泡和浏览器的默认行为
javascript阻止事件冒泡和浏览器的默认行为
在使用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="http://www.mamicode.com/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 = http://www.mamicode.com/false;
}
}
附： return false等效于同时调用e.preventDefault()和e.stopPropagation()；
javascript阻止事件冒泡和浏览器的默认行为