事件冒泡與默認行爲
Eventhtml
在觸發DOM上某個事件時，會產生一個事件對象event，這個對象包含着全部事件有關的信息（致使事件的元素、事件的類型、與特定事件相關的信息）jquery
全部瀏覽器都支持Event對象，但支持方式不一樣chrome
IE中的事件對象：window.event瀏覽器
/*函數
封裝Event對象ui
IE：window.eventthis
*/spa
function getEvent(event){code
return event?event:window.event;htm
}
事件冒泡
什麼是事件冒泡
即事件開始時由最具體的元素（文檔中嵌套最深的那個元素）接收，而後逐級向上傳播到較不爲具體的節點
全部瀏覽器都支持事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>事件冒泡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.one{
width:400px;
height:100px;
border:1px solid #333;
}
.two{
height:35px;
line-height:35px;
padding-left:15px;
border:1px solid red;
}
.three{
padding:10px;
background-color: green;
border:1px solid #999;
cursor:pointer;
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$(".one").click(function(event) {
alert($(this).text());
});
$(".two").click(function(event) {
alert($(this).text());
});
$(".three").click(function(event) {
alert($(this).text());
});
});
</script>
</head>
<body>
<div class="one">
我是one(div)
<p class="two">
我是two（p）
<span class="three">我是three（span）</span>
</p>
</div>
</body>
</html>
當在span、p、div元素上各綁定一個click事件，當單擊span元素時，會依次觸發三個事件，即span、p、div元素上的click事件，這就是事件冒泡，按照DOM層次結構像水泡同樣不斷向上直至頂端
阻止事件冒泡
DOM中提供stopPropagation()方法，但IE不支持，使用event對象在事件函數中調用就行
IE中提供的是，cancelBubble屬性，默認爲false，當它設置爲true時，就是阻止事件冒泡，也是用event對象在事件函數中調用
/*
封裝事件冒泡函數：
document.all:判斷瀏覽器是不是IE
IE：cancelBubble
Firefox：stopPropagation
*/
function stopPropagation(e){
var e = window.event || e;
if(document.all){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
jQuery中提供了stopPropagation()方法來中止事件冒泡，當須要時，只需用用event對象來調用就行，即event.stopPropagation();
默認行爲
什麼是默認行爲
網頁元素，都有本身的默認行爲，例如，單擊超連接會跳轉...
阻止默認行爲
DOM中提供preventDefault()方法來取消事件默認行爲，可是隻有當cancelable屬性設置爲true的事件，才能夠使用preventDefault()來取消事件默認行爲，使用event對象在事件函數中調用就行
IE中提供的是returnValue屬性，默認爲true，當它設置爲false時，就是取消事件默認行爲，也是用event對象在事件函數中調用
複製代碼
/*
封裝阻止元素的默認行爲函數
IE：returnValue
DOM：preventDefault
*/
function preventDefaultAction(event){
var event = window.event || event;
if(document.all){
//支持IE
event.returnValue = false;
}else{
//IE不支持
event.preventDefault();
}
}
複製代碼 jQuery中提供了preventDefault()方法來阻止元素的默認行爲，只須要用event對象來調用就好，即event.preventDefault()
若是想同時對事件對象中止冒泡和默認行爲，能夠在事件處理函數中返回false。這是對事件對象同時調用stopPropagation()方法和preventDefault()方法的一種簡寫方式
- 1. JS阻止冒泡和取消默認事件(默認行爲)
- 2. javascript阻止冒泡和默認事件（默認行爲）
- 3. js事件冒泡、阻止事件冒泡以及阻止默認行爲
- 4. 阻止事件冒泡 和 阻止事件默認行爲
- 5. 阻止事件冒泡和瀏覽器的默認行爲
- 6. javascript阻止事件冒泡和瀏覽器的默認行爲
- 7. 如何阻止事件冒泡和默認行爲？
- 8. JS阻止事件冒泡以及瀏覽器默認行爲
- 9. javascript如何阻止事件冒泡和默認行爲
- 10. 取消事件冒泡，取消默認行爲
- 更多相關文章...
- • MySQL默認值（DEFAULT） - MySQL教程
- • Scala 函數 - 默認參數值 - Scala教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。