jQuery中事件對象e的事件冒泡用法示例介紹

2019-11-20 20:47:01

字體：大中小

來源：轉載

供稿：網友

之前查手冊的時候沒有看到有事件對象這一概念，當時我想實現的是點擊一個文本框出現一個下拉多選框，在文本框失去焦點是觸發blur事件，從而使下拉框隱藏起來。但是當我要選擇多選框是也會使它隱藏，就不能進行選擇了，這讓我很郁悶。查了一天的資料，終于在脫離了焦點這一塊。在網上發現有一個事件冒泡的東西，發現通過點擊可以實現我的這一功能。

e.stopPropagation()阻止事件冒泡

復制代碼代碼如下:

 
<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
</head> 
<body> 
<table> 
<tr> 
<td><span>冒泡事件測試</span></td> 
</tr> 
</table> 
</body> 

我們先看這段代碼：

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(function () { 
$("table").click(function () { alert("table alert"); }); 
$("td").click(function () { alert("td alert"); }); 
$("span").click(function (){ 
alert("span alert"); 
}); 
}); 
</script> 

我們會看到這樣的情況：span alert -> td alert -> table alert。這就叫事件冒泡。就是從下到上，從里到外，事件依次觸發。能依次觸發的條件是擁有同一事件的多個嵌套的標簽，切事件會同時同步發生，會從里到外實現同一事件的響應。

有的時候我們不希望事件冒泡咋辦？

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(function () { 
$("table").click(function () { alert("table alert"); }); 
$("td").click(function () { alert("td alert"); }); 
$("span").click(function (e){ 
alert("span alert"); 
e.stopPropagation(); 
}); 
}); 
</script> 

當我給整個document實現click事件是，可以給文本框和下拉選框阻止事件冒泡，使得再點擊她們的同時不會使document觸發事件。

如果想獲得事件相關信息，就要給知識方法加一個e對象，e就是事件對象。

e.preventDefault()阻止事件默認行為。

復制代碼代碼如下:

 
$("a").click(function (e) { 
alert("默認行為被禁止嘍"); 
e.preventDefault(); 
}); 
<a >測試</a> 

return false等效于同時調用e.preventDefault()和e.stopPropagation()

return false除了阻止默認行為之外，還會阻止事件冒泡。如果手上有一份jquery源代碼的話，可查看其中有如下代碼：

復制代碼代碼如下:

 
if (ret===false){ 
　　event.preventDefault(); 
　　event.stopPropagation(); 
} 

上一篇：擴展jQuery對象時如何擴展成員變量具體怎么實現

下一篇：jquery實現select選中行、列合計示例

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注