微信小程式 冒泡事件及其阻止

2022-06-07 13:36:08 字數 1448 閱讀 3124

事件的類別分為幾種:

點選事件:tap

長按事件:longtap

觸控事件:touchstart; touchend;touchcancel;touchmove

其他:input;submit....

其中前三類是冒泡事件,其他的稱為非冒泡事件。

寫乙個簡單的例子,**就不一一貼出來了,wxml的檔案如下:

<

view

class

='redview'

bindtap

='redclick'

>

紅色

<

view

class

='yellowview'

bindtap

='yellowclick'

>

黃色

<

view

class

='blueview'

bindtap

='blueclick'

>

藍色

view

>

view

>

view

>

效果如圖:

當我點選最內層的藍色方框的時候,列印的結果如下:

冒泡事件的機制是先列印點選的藍色,也就是最內層,然後依次列印第二層和第三層。假設點選黃色層,會依次列印出黃色和紅色。點選紅色時只列印紅色。

但是也可以阻止冒泡事件的發生,其實很簡單,直接把bindtap改為catchtap即可。

<

view

class

='redview'

bindtap

='redclick'

>

紅色

<

view

class

='yellowview'

bindtap

='yellowclick'

>

黃色

<

view

class

='blueview'

catchtap

='blueclick'

>

藍色

view

>

view

>

view

>

這樣你點選最內層的藍色,只會列印藍色而不會列印出黃色和紅色了。但是點選黃色還是會列印黃色和紅色,這個時候再把黃色頁面的bindtap改成catchtap就可以了。

** 

微信小程式 阻止冒泡事件

如bindtap,當使用者點選該元件的時候會在該頁面對應的page中找到相應的事件處理函式。view id taptest data hi wechat bindtap tapname click me view page 事件繫結的寫法同元件的屬性,以 key value 的形式。bind事件繫結...

微信小程式 事件

事件繫結 事件繫結的寫法同元件的屬性,以 key value 的形式。key 以bind或catch開頭,然後跟上事件的型別,如bindtap,catchtouchstart value 是乙個字串,需要在對應的 page 中定義同名的函式。不然當觸發事件的時候會報錯。bind事件繫結不會阻止冒泡事...

微信小程式事件小結

1 事件繫結bindtap 如上,給增加了乙個golink的方法,那如何獲取事件的入參?先將需要傳遞的引數通過data 形式寫在元素上,上面 golink 要傳遞linkeurl,直接在image元素上新增data linke url直接看golink方法 開啟url鏈結 golink functi...