詳解javascript如何阻止冒泡事件及阻止預設事件
在說事件冒泡之前，我們先說說事件物件（Event）
Event
1、在觸發DOM上某個事件時，會產生一個事件物件event，這個物件包含著所有事件有關的資訊（導致事件的元素、事件的型別、與特定事件相關的資訊）
2、所有瀏覽器都支援Event物件，但支援方式不同
3、IE中的事件物件：window.event
一、事件冒泡
什麼是事件冒泡
即事件開始時由最具體的元素（文件中巢狀最深的那個元素）接收，然後逐級向上傳播到較不為具體的節點
所有瀏覽器都支援事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset 當在span、p、div元素上各繫結一個click事件，當單擊span元素時，會依次觸發三個事件，即span、p、div元素上的click事件，這就是事件冒泡，按照DOM層次結構像水泡一樣不斷向上直至頂端
阻止事件冒泡
DOM中提供stopPropagation()方法，但IE不支援，使用event 物件直接在事件函式中呼叫就行
IE中提供的是，cancelBubble屬性，預設為false，當它設定為true時，就是阻止事件冒泡，也是用event物件在事件函式中呼叫
阻止冒泡函式
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C 阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE 阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}jQuery中提供了stopPropagation()方法來停止事件冒泡，當需要時，只需用用event物件來呼叫就行，即event.stopPropagation();
二、預設行為
什麼是預設行為 網頁元素，都有自己的預設行為，例如，單擊超連結會跳轉…
阻止預設行為
DOM中提供preventDefault()方法來取消事件預設行為，但是隻有當cancelable屬性設定為true的事件，才可以使用preventDefault()來取消事件預設行為，使用event物件在事件函式中呼叫就行
IE中提供的是returnValue屬性，預設為true，當它設定為false時，就是取消事件預設行為，也是用event物件在事件函式中呼叫
阻止預設行為函式
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}jQuery中提供了preventDefault()方法來阻止元素的預設行為，只需要用event物件來呼叫即可，即
event.preventDefault()如果想同時對事件物件停止冒泡和預設行為，可以在事件處理函式中返回false。 這是對事件物件同時呼叫stopPropagation()方法和preventDefault()方法的一種簡寫方式
阻止事件冒泡和預設行為綜合例項 可自己逐步除錯，檢視效果，加深印象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡和預設行為</title>
</head>
<style type="text/css">
.one {
width: 200px;
height: 200px;
background: navajowhite;
}
.two {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.three {
cursor: pointer;
/*padding: 10px;*/
background: red;
}
.defauleAction {
width: 100px;
height: 100px;
border: 1px solid red;
line-height: 100px;
}
.four {
width: 200px;
height: 200px;
background: navajowhite;
margin-top: 20px;
}
.five {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.six {
cursor: pointer;
/*padding: 10px;*/
background: red;
</style>
<body>
<div class="one">我是最外層
<p class="two">我是第二層
<span class="three">我是最裡層</span>
</p>
</div>
<!--阻止連結自動跳轉的預設行為-->
<div class="defaultAction">
<a href="https://blog.csdn.net/qq_36595013">我的部落格主頁</a>
</div>
<!--同時阻止冒泡事件和預設行為-->
<div class="four">我是最外層
<p class="five">我是第二層
<span class="six"><a href="https://blog.csdn.net/qq_36595013">我是最裡層</a></span>
</p>
</div>
</body>
<script type="text/javascript" src="../jQuery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".one").click(function(e) {
alert($(this).text());
});
$(".two").click(function(e) {
preventPropagation(e);
alert($(this).text());
});
$(".three").click(function(e) {
/*一、先在最裡層新增進阻止事件冒泡函式，再檢視效果
*發現點選中間層的時候還是會冒泡到最外層
* 然後再中間層加入阻止函式，再檢視效果
*/
preventPropagation(e);
alert($(this).text());
});
//阻止預設單擊連結跳轉行為
$(".defaultAction>a").click(function(e) {
preventDefaultAction(e);
alert("連結不跳轉了吧！");
});
//阻止事件冒泡函式
function preventPropagation(e) {
e = e||window.event;
if(e.stopPropagation) { //W3C方法
e.stopPropagation();
}else { //IE方法
e.cancelBubble = true;
}
}
//阻止預設行為函式
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}
//同時阻止預設行為和事件冒泡
$(".six").click(function() {
alert("點我之後既不向上冒泡又不跳轉到預設的連結");
//要想同時阻止預設行為和事件冒泡，只需要返回return false就可以了
return false;
});
$(".five").click(function(e) {
preventPropagation(e);
alert("我是中間層");
});
$(".four").click(function() {
alert("我是最外層");
});
});
</script>
</html>