JS阻止事件冒泡的3種方法之間的不同

2022-03-27 17:57:27 字數 1155 閱讀 8356

什麼是js事件冒泡?:

在乙個物件上觸發某類事件(比如單擊onclick事件),如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理(父級物件所有同類事件都將被啟用),或者它到達了物件層次的最頂層,即document物件(有些瀏覽器是window)。

如何來阻止jquery事件冒泡?

通過乙個小例子來解釋

<%@ page language="c#" autoeventwireup="true" codefile="default5.aspx.cs"inherits="default5"%>

比如上面這個頁面,

分為三層:divone是第外層,divtwo中間層,hr_three是最裡層;

他們都有各自的click事件,最裡層a標籤還有href屬性。

執行頁面,點選「點選我」,會依次彈出:我是最裡層---->我是中間層---->我是最外層

這就是事件冒泡,本來我只點選id為hr_three的標籤,但是確執行了三個alert操作。

事件冒泡過程(以標籤id表示):hr_three----> divtwo----> divone 。從最裡層冒泡到最外層。

如何來阻止?

1.event.stoppropagation(); 

$(function() );

});2.return false;

如果頭部加入的是以下**

$(function() );

});

由此可以看出:

1.event.stoppropagation(); 

事件處理過程中,阻止了事件冒泡,但不會阻擊預設行為(它就執行了超連結的跳轉)

2.return false;

事件處理過程中,阻止了事件冒泡,也阻止了預設行為(比如剛才它就沒有執行超連結的跳轉)

還有一種有冒泡有關的:

3.event.preventdefault(); 

如果把它放在頭部a標籤的click事件中,點選「點選我」。

JS阻止事件冒泡的3種方法

什麼是js事件冒泡?在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件...

js阻止事件的冒泡

在這棵樹裡面,我點選加號的同時,點選事件會傳播到上級,從而觸發上層元素的點選事件 這不是我所希望的 於是在 的方法裡面加上這句 event.stoppropagation事件就不會向上冒泡了 addchildnode function m,node,event 官方說明 event 物件 不再派發事...

jQuery阻止冒泡事件的方法

jquery提供了兩種阻止冒泡事件的方法 方式一 event.stoppropagation div1 mousedown function event 方式二 return false div2 mousedown function event 注意 return false既阻止事件往上冒泡,也...