什么是事件冒泡?
要知道怎么阻止事件冒泡,首先我們來看一下什么是事件冒泡。
事件冒泡即在一個對象上觸發某類事件(比如單擊事件),如果該對象定義了此事件的處理程序,那么此事件就會調用這個處理程序,然后向該對象的父級對象傳播(如果沒有定義此事件的處理程序,那么這個事件會直接向父級對象傳播),直至它到達了對象層次的最頂層即document對象(有些瀏覽器是window),父級對象所有同類事件都被激活。
? 下面通過一個小例子來解釋 代碼如下:
比如上面這個頁面: ID 分別為"one","two","three"的三個標簽呈嵌套關系,而且他們都有各自的click事件。
?運行頁面,點擊“百度一下”,會依次彈出:three ----> two ----> one ---->最后跳轉到百度。 這就是事件冒泡,本來我只點擊ID為 three 的標簽,但是卻還執行了三個alert操作。所以事件冒泡過程(以標簽ID表示):three ----> Two ----> One。從最里層冒泡到最外層。
?如何阻止事件冒泡??
?1、event.stopPropagation();?
代碼如下:
再點擊“百度一下”,會彈出:three ,然后跳轉到百度。不會再附加彈出 two、one。
2、return false;?
代碼如下:
點擊“百度一下”,會彈出:three ,不會彈出 two ,one。 同時也不會跳轉。
?總結:
由此可以看出:
?1.event.stopPropagation(); 事件處理過程中,阻止了事件冒泡,但不會阻擊默認行為(它就執行了超鏈接的跳轉)?
2.return false; 事件處理過程中,阻止了事件冒泡,也阻止了默認行為(比如剛才它就沒有執行超鏈接的跳轉)
補充:
阻止默認事件: event.preventDefault();?
代碼如下:
?$(function(){ $("#three").click(function(event){ event.preventDefault(); }); });
再點擊“百度一下”,會彈出:three ,two ,one。 但也不會跳轉。它的作用是:事件處理過程中,不阻止事件冒泡,但阻止默認行為。