jQuery中事件對(duì)象e的事件冒泡用法示例介紹
更新時(shí)間：2014年04月25日 15:26:25 作者：
這篇文章主要介紹了jQuery中事件對(duì)象e的事件冒泡用法,需要的朋友可以參考下
之前查手冊(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()阻止事件冒泡
<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>
我們先看這段代碼：
<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í)候我們不希望事件冒泡咋辦？
<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)行為。
$("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源代碼的話(huà)，可查看其中有如下代碼：
if (ret===false){
event.preventDefault();
event.stopPropagation();
}
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源代碼的話(huà)，可查看其中有如下代碼：
復(fù)制代碼 代碼如下:
if (ret===false){
event.preventDefault();
event.stopPropagation();
}
相關(guān)文章
ajax的分頁(yè)查詢(xún)示例（不刷新頁(yè)面）
這篇文章主要介紹了ajax的分頁(yè)查詢(xún)示例（不刷新頁(yè)面），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
本文跟大家分享了兩個(gè)Jquery菜單效果，各有各的特色，希望大家都會(huì)喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下2015-09-09
Jquery寫(xiě)一個(gè)鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)原理與代碼
近日項(xiàng)目中要做一個(gè)鼠標(biāo)拖拽層的效果，于是手動(dòng)使用Jquery做了一個(gè)，發(fā)出來(lái)跟大伙兒分享一下，并希望能得到高手的指點(diǎn),如何有高手改進(jìn)的話(huà)，在下不勝感激2012-12-12
jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式的相關(guān)資料,需要的朋友可以參考下2015-07-07
JQuery插件fancybox無(wú)法在彈出層使用左右鍵的解決辦法
本篇文章主要是對(duì)JQuery插件fancybox無(wú)法在彈出層使用左右鍵的解決辦法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼
利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
原來(lái)ie對(duì)默認(rèn)對(duì)彈出窗口有會(huì)限制他的大小和位置 所以這就是為什么本地和博客園上看到會(huì)不一樣的原因了2010-09-09
jQuery 導(dǎo)航自動(dòng)跟隨滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 導(dǎo)航自動(dòng)跟隨滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-05-05