on繫結阻止冒泡失敗

2022-05-01 19:45:10 字數 970 閱讀 1354

使用zepto庫,有如下dom

1

<

div

id="j_parent"

>

2<

a href

="#"

>

3<

span

>點我有驚喜

span

>4a

>

5div

>

view code

以上div內的節點是後續生成的,通過on繫結事件:

1 $('#j_parent').on('tap',  'span', function

(e));

67 $('#j_parent').on('tap', 'a', function

(e));

view code

此時點選span區域,控制台會打出:

'span'

'a'阻止冒泡失敗,此時可以通過在a的繫結事件裡判斷e.target,如下:

1 $('#j_parent').on('tap',  'a', function

(e)5 console.log('a');

6 });

view code

這樣點選span區域,控制台會打出:

'span'

ps:移動網頁中click較tap有延遲;

target與currenttarget的區別,如以上a的繫結事件**中,如果點選span區域,此時e.target為span,而e.currenttarget為a。更專業的說明:

target在事件流的目標階段;currenttarget在事件流的捕獲,目標及冒泡階段。只有當事件流處在目標階段的時候,兩個的指向才是一樣的, 而當處於捕獲和冒泡階段的時候,target指向被單擊的物件而currenttarget指向當前事件活動的物件(一般為父級)。

jquery中on動態繫結阻止冒泡事件異常

緒論 如果動態生成的元素用on來繫結事件,會根據selector不同,阻止冒泡的結果也不同。公共html 和css樣式如下 新增乙個li function 1 父節點繫結的父元素selector大於子元素繫結的selector,即父節點繫結的父元素大於子元素繫結的父元素,阻止冒泡正常 能阻止冒泡,父...

阻止事件冒泡

事件冒泡的概念在此不再重複,下面主要介紹防止事件冒泡的方法 符合w3c標準的event.stoppropagation 和ie瀏覽器下的window.event.cancelbubble true 上述 注釋中標註了阻止事件冒泡的方法,下面是針對兩種方法的封裝 function stopbubble...

阻止事件冒泡

js div li click function e div ul click function e div click function e 說明 1.事件冒泡就是觸發孩子事件時,如果他的父親也有個事件,那麼他執行孩子事件後還會執行父親的事件。2,在孩子節點執行完,return false 這樣就...