阻止事件冒泡及預設行為
為使點選當前元素，只執行當前所點選元素的特定操作，可以使用阻止冒泡或者阻止預設行為。
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>