jQuery中事件對(duì)象e的事件冒泡用法示例介紹
更新時(shí)間:2014年04月25日 15:26:25 作者:
這篇文章主要介紹了jQuery中事件對(duì)象e的事件冒泡用法,需要的朋友可以參考下
之前查手冊(cè)的時(shí)候沒有看到有事件對(duì)象這一概念,當(dāng)時(shí)我想實(shí)現(xiàn)的是點(diǎn)擊一個(gè)文本框出現(xiàn)一個(gè)下拉多選框,在文本框失去焦點(diǎn)是觸發(fā)blur事件,從而使下拉框隱藏起來。但是當(dāng)我要選擇多選框是也會(huì)使它隱藏,就不能進(jìn)行選擇了,這讓我很郁悶。查了一天的資料,終于在脫離了焦點(diǎn)這一塊。在網(wǎng)上發(fā)現(xiàn)有一個(gè)事件冒泡的東西,發(fā)現(xiàn)通過點(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源代碼的話,可查看其中有如下代碼:
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源代碼的話,可查看其中有如下代碼:
復(fù)制代碼 代碼如下:
if (ret===false){
event.preventDefault();
event.stopPropagation();
}
相關(guān)文章
jQuery的實(shí)現(xiàn)原理的模擬代碼 -4 重要的擴(kuò)展函數(shù) extend
在上兩篇文章中,我們看到每次要通過 jQuery 的原型增加共享方法的時(shí)候,都需要通過 jQuery.fn 一個(gè)個(gè)進(jìn)行擴(kuò)展,非常麻煩.2010-08-08jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-08-08基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05jQuery原理系列-css選擇器的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨Query原理系列-css選擇器的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jquery 查找iframe父級(jí)頁面元素的實(shí)現(xiàn)代碼
jquery 查找iframe父級(jí)頁面元素的實(shí)現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。2011-08-08