理解jquery事件冒泡_jquery
- WBOY原創
- 2016-05-16 15:22:071183瀏覽
一、什麼是jquery事件冒泡
在許多教材或手冊都可能涉及事件冒泡的概念，老手來說這當然是最基本的概念，但往往對於初學者可能比較陌生或者說從來沒有聽說過。以下就結合程式碼實例來簡單介紹一下什麼是事件冒泡。
程式碼實例如下:
<html>
<head>
<meta charset=" gb2312">
<title>事件冒泡</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#second").click(function(){
alert("我是second");
})
$("#first").click(function(){
alert("我是first");
})
})
</script>
</head>
<body>
<p id="first"><a id="second" href="http://www.baidu.com">点击查看效果</a></p>
</body>
</html>
在上述程式碼中，我們可能只想點擊錨點後彈出“我是third”，但是令人奇怪的事情卻是所有父元素定義的click事件都會被觸發。這就是一個典型的事件冒泡效果。所謂的冒泡事件就是，如果在某一個物件上觸發某一類事件（如上例的click事件），那麼此事件會向物件的父級物件傳播，並觸發父物件上定義的同類事件。事件傳播的方向是從最底層到最頂層，類似水泡從水底浮上來一般。
二、javascript如何阻止事件冒泡
冒泡事件能夠帶來便利，有時候也會帶來麻煩，以下就簡單介紹如何阻止事件冒泡。
程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<head>
<title>事件冒泡</title>
<style type="text/css">
#grandfather{
border:1px solid #0066FF;
cellpadding:0px;
cellspacing:0px;
}
#grandfather td{
border: 1px solid #0066FF;
}
</style>
<script type="text/javascript">
function trclick(){
alert("父亲的onclick事件触发");
}
function tableclick(){
alert("祖父的onclick事件触发");
}
window.onload=function(){
var grandfather=document.getElementById("grandfather");
var father=document.getElementById("father");
var noStop=document.getElementById("noStop");
var haveStop=document.getElementById("haveStop");
grandfather.onclick=tableclick;
father.onclick=trclick;
noStop.onclick=function(){
alert("没有阻止冒泡的子元素");
}
haveStop.onclick=function(evt){
alert("阻止冒泡的子元素");
if(window.event){
event.cancelBubble=true;
}
else if(evt){
evt.stopPropagation();
}
}
}
</script>
</head>
<body>
<table width="204" id="grandfather">
<tr >
<td width="96"></td>
<td width="96"></td>
</tr>
<tr id="father">
<td id="noStop">没有阻止事件冒泡</td>
<td id="haveStop">阻止了事件冒泡</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
程式碼註解:
1.if(window.event)這個用來相容IE8和IE8一下瀏覽器。
2. evt.stopPropagation()這個是標準瀏覽器。
以上程式碼中，一個儲存格阻止了事件冒泡，一個沒有阻止事件冒泡，希望對大家的學習有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn