Jquery阻止事件冒泡 event.stopPropagation
更新時(shí)間：2011年12月11日 22:53:40 作者：
幫朋友寫了一個(gè)小效果，單擊標(biāo)簽后標(biāo)簽變色并添加一個(gè)叉的圖片，點(diǎn)擊叉標(biāo)簽恢復(fù)原樣，具體效果請(qǐng)點(diǎn)擊下面的result
描述： 防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)。
version added: 1.0
event.stopPropagation()
我們可以用 event.isPropagationStopped() 來確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)調(diào)用過了。
這個(gè)方法對(duì) trigger() 來自定義的事件同樣有效。
注意，這不會(huì)阻止同一個(gè)元素上的其它事件處理函數(shù)的運(yùn)行。
Additional Notes:
自從.live()方法處理事件一旦傳播到文檔的頂部，live事件是不可能停止傳播的。同樣地，.delegate() 事件將始終傳播給其中包含的被委托元素；元素上的事件將在被委托事件被調(diào)用的時(shí)候執(zhí)行。
Example:
滅掉click事件的冒泡。
$("p").click(function(event){
event.stopPropagation();
// do something
});
東西并不難，主要是記錄下其中的阻止事件冒泡。
因?yàn)閐iv添加了單擊事件，div內(nèi)部的img也添加了單擊事件，所以當(dāng)單擊img時(shí)會(huì)先觸發(fā)img上的單擊事件，再觸發(fā)div上的單擊事件，這就是事件冒泡。
在Jquery中我們可以很方便的阻止他。
如下
這樣一來單擊img就不再觸發(fā)div的單擊事件啦
$('div').click(function(){
var $div = $(this);
if($div.find('img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('<img src="http://www.dhdzp.com/lovejjhao/341157/o_cha.jpg"/>').
appendTo($(this)).click(function(event){
$div.css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation();
}).css('margin-left','10px');
}
});
version added: 1.0
event.stopPropagation()
我們可以用 event.isPropagationStopped() 來確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)調(diào)用過了。
這個(gè)方法對(duì) trigger() 來自定義的事件同樣有效。
注意，這不會(huì)阻止同一個(gè)元素上的其它事件處理函數(shù)的運(yùn)行。
Additional Notes:
自從.live()方法處理事件一旦傳播到文檔的頂部，live事件是不可能停止傳播的。同樣地，.delegate() 事件將始終傳播給其中包含的被委托元素；元素上的事件將在被委托事件被調(diào)用的時(shí)候執(zhí)行。
Example:
滅掉click事件的冒泡。
復(fù)制代碼 代碼如下:
$("p").click(function(event){
event.stopPropagation();
// do something
});
東西并不難，主要是記錄下其中的阻止事件冒泡。
因?yàn)閐iv添加了單擊事件，div內(nèi)部的img也添加了單擊事件，所以當(dāng)單擊img時(shí)會(huì)先觸發(fā)img上的單擊事件，再觸發(fā)div上的單擊事件，這就是事件冒泡。
在Jquery中我們可以很方便的阻止他。
如下
復(fù)制代碼 代碼如下:
event.stopPropagation();
這樣一來單擊img就不再觸發(fā)div的單擊事件啦
復(fù)制代碼 代碼如下:
$('div').click(function(){
var $div = $(this);
if($div.find('img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('<img src="http://www.dhdzp.com/lovejjhao/341157/o_cha.jpg"/>').
appendTo($(this)).click(function(event){
$div.css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation();
}).css('margin-left','10px');
}
});
您可能感興趣的文章:
- MySQL數(shù)據(jù)庫事務(wù)隔離級(jí)別介紹(Transaction Isolation Level)
- spring事物傳播propagation類別含義詳解
- spring事務(wù)Propagation及其實(shí)現(xiàn)原理詳解
- python實(shí)現(xiàn)BackPropagation算法
- JavaScript中使用stopPropagation函數(shù)停止事件傳播例子
- js中的preventDefault與stopPropagation詳解
- 關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
- 阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
- 淺談spring中isolation和propagation的用法
相關(guān)文章
jQuery 實(shí)現(xiàn)ajax傳入?yún)?shù)含有特殊字符的方法總結(jié)
在做ajax登錄時(shí)候遇到的一個(gè)問題，當(dāng)傳入?yún)?shù)含有特殊字符，比如：“$'#@”等。參數(shù)傳遞會(huì)有問題，無法正確獲取。本文章向碼農(nóng)介紹jQuery ajax特殊字符參數(shù)解決方法，需要的朋友可以參考一下。2016-10-10
這篇文章主要介紹了淺析jQuery EasyUI中的tree的用法,是根據(jù)個(gè)人對(duì)此的理解來實(shí)現(xiàn)的，需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JQuery控制Radio選中方法,涉及jQuery表單操作及鼠標(biāo)事件響應(yīng)的方法,需要的朋友可以參考下2015-05-05
jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
本文給大家分享的是使用jQuery的masonry庫和infinitescroll庫實(shí)現(xiàn)的瀑布流美女圖片展示的實(shí)例，效果非常不錯(cuò)，這里推薦給大家，有需要的小火把可以參考下。2015-04-04
jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法,結(jié)合實(shí)例形式分析了jQuery數(shù)學(xué)運(yùn)算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
通過最終效果發(fā)現(xiàn)，當(dāng)頭像處于最前面時(shí)，圖像最大，透明低。越往后頭像就越小，就越透明2011-12-12
jQuery數(shù)據(jù)顯示插件整合實(shí)現(xiàn)代碼
由于我們公司的產(chǎn)品涉及到很多的表格數(shù)據(jù)顯示，而且每張表的字段數(shù)都很多，在工作過程中(幾任同仁的努力)，整合出一套自認(rèn)為較為輕巧的方案2011-10-10
jackson解析json字符串,首字母大寫會(huì)自動(dòng)轉(zhuǎn)為小寫的方法
下面小編就為大家分享一篇jackson解析json字符串,首字母大寫會(huì)自動(dòng)轉(zhuǎn)為小寫的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Jquery跳到頁面指定位置的方法,需要的朋友可以參考下2014-05-05
jQuery采用連綴寫法實(shí)現(xiàn)的折疊菜單效果
這篇文章主要介紹了jQuery采用連綴寫法實(shí)現(xiàn)的折疊菜單效果,通過jQuery的連綴寫法(又稱鏈?zhǔn)讲僮?實(shí)現(xiàn)菜單折疊的顯示效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09