为使点击当前元素，只执行当前所点击元素的特定操作，可以使用阻止冒泡或者阻止默认行为。
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>