什么是事件冒泡?
要知道怎么阻止事件冒泡肝谭,首先我們來看一下什么是事件冒泡。
事件冒泡即在一個(gè)對(duì)象上觸發(fā)某類事件(比如單擊事件)歇盼,如果該對(duì)象定義了此事件的處理程序梢褐,那么此事件就會(huì)調(diào)用這個(gè)處理程序旺遮,然后向該對(duì)象的父級(jí)對(duì)象傳播(如果沒有定義此事件的處理程序,那么這個(gè)事件會(huì)直接向父級(jí)對(duì)象傳播)盈咳,直至它到達(dá)了對(duì)象層次的最頂層即document對(duì)象(有些瀏覽器是window)耿眉,父級(jí)對(duì)象所有同類事件都被激活鱼响。
? 下面通過一個(gè)小例子來解釋 代碼如下:
比如上面這個(gè)頁面: ID 分別為"one","two","three"的三個(gè)標(biāo)簽呈嵌套關(guān)系,而且他們都有各自的click事件。
?運(yùn)行頁面筐骇,點(diǎn)擊“百度一下”,會(huì)依次彈出:three ----> two ----> one ---->最后跳轉(zhuǎn)到百度债鸡。 這就是事件冒泡,本來我只點(diǎn)擊ID為 three 的標(biāo)簽铛纬,但是卻還執(zhí)行了三個(gè)alert操作。所以事件冒泡過程(以標(biāo)簽ID表示):three ----> Two ----> One告唆。從最里層冒泡到最外層。
?如何阻止事件冒泡??
?1模她、event.stopPropagation();?
代碼如下:
再點(diǎn)擊“百度一下”懂牧,會(huì)彈出:three ,然后跳轉(zhuǎn)到百度。不會(huì)再附加彈出 two僧凤、one。
2躯保、return false;?
代碼如下:
點(diǎn)擊“百度一下”吻氧,會(huì)彈出:three 溺忧,不會(huì)彈出 two 盯孙,one。 同時(shí)也不會(huì)跳轉(zhuǎn)歌溉。
?總結(jié):
由此可以看出:
?1.event.stopPropagation(); 事件處理過程中骑晶,阻止了事件冒泡,但不會(huì)阻擊默認(rèn)行為(它就執(zhí)行了超鏈接的跳轉(zhuǎn))?
2.return false; 事件處理過程中桶蛔,阻止了事件冒泡,也阻止了默認(rèn)行為(比如剛才它就沒有執(zhí)行超鏈接的跳轉(zhuǎn))
補(bǔ)充:
阻止默認(rèn)事件: event.preventDefault();?
代碼如下:
?$(function(){ $("#three").click(function(event){ event.preventDefault(); }); });
再點(diǎn)擊“百度一下”蹂析,會(huì)彈出:three 舔示,two 电抚,one。 但也不會(huì)跳轉(zhuǎn)蝙叛。它的作用是:事件處理過程中,不阻止事件冒泡锻煌,但阻止默認(rèn)行為姻蚓。