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

2019-11-20 20:47:01

字體：大中小

供稿：網(wǎng)友

之前查手冊(cè)的時(shí)候沒(méi)有看到有事件對(duì)象這一概念，當(dāng)時(shí)我想實(shí)現(xiàn)的是點(diǎn)擊一個(gè)文本框出現(xiàn)一個(gè)下拉多選框，在文本框失去焦點(diǎn)是觸發(fā)blur事件，從而使下拉框隱藏起來(lái)。但是當(dāng)我要選擇多選框是也會(huì)使它隱藏，就不能進(jìn)行選擇了，這讓我很郁悶。查了一天的資料，終于在脫離了焦點(diǎn)這一塊。在網(wǎng)上發(fā)現(xiàn)有一個(gè)事件冒泡的東西，發(fā)現(xiàn)通過(guò)點(diǎn)擊可以實(shí)現(xiàn)我的這一功能。

e.stopPropagation()阻止事件冒泡

復(fù)制代碼代碼如下:

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

我們先看這段代碼：

復(fù)制代碼代碼如下:

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

我們會(huì)看到這樣的情況：span alert -> td alert -> table alert。這就叫事件冒泡。就是從下到上，從里到外，事件依次觸發(fā)。能依次觸發(fā)的條件是擁有同一事件的多個(gè)嵌套的標(biāo)簽，切事件會(huì)同時(shí)同步發(fā)生，會(huì)從里到外實(shí)現(xiàn)同一事件的響應(yīng)。

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

復(fù)制代碼代碼如下:

 
<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> 

當(dāng)我給整個(gè)document實(shí)現(xiàn)click事件是，可以給文本框和下拉選框阻止事件冒泡，使得再點(diǎn)擊她們的同時(shí)不會(huì)使document觸發(fā)事件。

如果想獲得事件相關(guān)信息，就要給知識(shí)方法加一個(gè)e對(duì)象，e就是事件對(duì)象。

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

復(fù)制代碼代碼如下:

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

return false等效于同時(shí)調(diào)用e.preventDefault()和e.stopPropagation()

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

復(fù)制代碼代碼如下:

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

上一篇：擴(kuò)展jQuery對(duì)象時(shí)如何擴(kuò)展成員變量具體怎么實(shí)現(xiàn)

下一篇：jquery實(shí)現(xiàn)select選中行、列合計(jì)示例

學(xué)習(xí)交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)箱大愛(ài)...

熱門(mén)圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

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