jquery取消事件冒泡的三種方法(推薦)
1、通過返回false來取消默認的行為并阻止事件起泡。
jQuery 代碼:
$("form").bind( "submit", function() { return false; } );
2、通過使用 preventDefault() 方法只取消默認的行為。
jQuery 代碼:
$("form").bind( "submit", function(event){ event.preventDefault(); } );
3、通過使用 stopPropagation() 方法只阻止一個事件起泡。
jQuery 代碼:
$("form").bind( "submit", function(event){ event.stopPropagation(); } );
(4)總結(jié)
1. 一個事件起泡對應(yīng)觸發(fā)的是上層的同一事件
特殊:如果two設(shè)置成雙擊事件,那么在你單擊two的時候就會起泡觸發(fā)one單擊的事件
(雙擊包含單擊)。
2. 如果在click事件中,在你要處理的事件之前加上e.preventDefault();
那么就取消了行為(通俗理解:相當于做了個return操作),不執(zhí)行之后的語句了。
3. e.stopPropagation()只要在click事件中,就不會觸發(fā)上層click事件。
//如果提供了事件對象,則這是一個非IE瀏覽器 if ( e && e.stopPropagation ) // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否則,我們需要使用IE的方式來取消事件冒泡 window.event.cancelBubble = true; return false;
以上這篇jquery取消事件冒泡的三種方法(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery+datatables插件實現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
這篇文章主要介紹了jQuery+datatables插件實現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能,涉及jQuery結(jié)合datatables插件針對頁面表格實現(xiàn)數(shù)據(jù)加載及增刪改查等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04jQuery插件zTree實現(xiàn)刪除樹節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹節(jié)點的方法,結(jié)合實例形式分析了jQuery樹插件zTree針對節(jié)點的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
這篇文章主要介紹了jQuery實現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作,結(jié)合實例形式分析了jQuery針對select選中觸發(fā)change事件相關(guān)操作技巧,需要的朋友可以參考下2018-07-07idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項目用了SunSean的idTabs,但每個tab里的控件會觸發(fā)postback,或者轉(zhuǎn)到其他頁面再轉(zhuǎn)回來,這樣當前選中的tab必丟。印度同事不肯用AJAX,無奈今天加班給印度人寫個demo,通過回傳URL參數(shù)來選擇tab2012-04-04