为使点击当前元素,只执行当前所点击元素的特定操作,可以使用阻止冒泡或者阻止默认行为。
1、阻止默认行为。preventDefault()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div2" style="width:300px; height:300px; background:palevioletred">
<div id="div1" style="width:100px; height:100px; background:palegreen">
<a id="aaa" href="http://www.baidu.com">aaa</a>
</div>
</div>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oA = document.getElementById('aaa');
oA.onclick = function(ev) {
var oEvent = ev || event;
alert("this is div1");
//js阻止链接默认行为,没有停止冒泡
oEvent.preventDefault();
};
oDiv1.onclick=function(){
alert("this is div2");
}
}
</script>
</body>
</html>
2、阻止冒泡行为,不阻止默认行为。① cancelBubble ② stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div2" style="width:300px; height:300px; background:palevioletred">
<div id="div1" style="width:100px; height:100px; background:palegreen">
<a id="aaa" href="http://www.baidu.com">aaa</a>
</div>
</div>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onclick = function(ev) {
var oEvent = ev || event;
alert("this is div1");
//js阻止事件冒泡,不阻止默认行为。
oEvent.cancelBubble = true;//支持IE,不符合W3C标准。
oEvent.stopPropagation();//不支持IE,支持火狐,符合W3C标准。
}
oDiv2.onclick = function(ev) {
var oEvent = ev || event;
alert("this is div2");
}
}
</script>
</body>
</html>
3、即阻止默认行为,也阻止冒泡行为 。return false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div2" style="width:300px; height:300px; background:palevioletred">
<div id="div1" style="width:100px; height:100px; background:palegreen">
<a id="aaa" href="http://www.baidu.com">aaa</a>
</div>
</div>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onclick = function(ev) {
var oEvent = ev || event;
alert("this is div1");
//js阻止事件冒泡,也阻止默认行为。return false 阻止当前点击对象事件冒泡
return false;
};
document.onclick = function(ev) {
oDiv1.style.color="red";
};
}
</script>
</body>
</html>