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