停止冒泡
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
一般来说使用下面一行代码就可以解决!
window.event? window.event.cancelBubble = true : e.stopPropagation();
举例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li id='test'>test</li>
</ul>
</div>
<script type="text/javascript">
$('#test').click(function () {
alert('li');
});
</script>
</body>
</html>
这时候点击test会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。
然而在li标点点击事件的function中添加window.event? window.event.cancelBubble = true : e.stopPropagation();则只会触发alert( “li” );阻止目标元素的事件冒泡到父级元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li id='test'>test</li>
</ul>
<script type="text/javascript">
$('#test').click(function (e) {
window.event? window.event.cancelBubble = true : e.stopPropagation();
alert('li');
});
</script>
</body>
</html>
阻止默认行为
w3c的方法是e.preventDefault()
,IE则是使用e.returnValue = false;
preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>
,提交按钮<input type=”submit”>
等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使元素本身有默认行为,调用preventDefault也是不会起作用的。
如:以下代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<a href='http://www.baidu.com' id="testA">百度</a>
</body>
</html>
点击百度时会跳转!如果将代码变为如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<a href='http://www.baidu.com' id="testA">百度</a>
<script type="text/javascript">
var a = document.getElementById("testA");
$('a').click(function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
});
</script>
</body>
</html>
此时再点击百度也不会跳转!这就是阻止浏览器默认行为
return false
javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。
下面这个使用原生js,只会阻止默认行为,不会停止冒泡
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li id='test'>test</li>
<a href='http://www.baidu.com' id="testA">百度</a>
</ul>
<script type="text/javascript">
var a = document.getElementById("testA");
a.onclick = function()
{
return false;
}
</script>
</body>
</html>