小程式冒泡解決

2022-03-08 02:28:25 字數 1092 閱讀 7795

事件分為冒泡事件和非冒泡事件:

事件繫結的寫法同元件的屬性,以 key、value 的形式。

<

view

id="outter"

ontap

="handletap1"

>

view1

<

view

id="middle"

catchtap

="handletap2"

>

view2

<

view

id="inner"

ontap

="handletap3"

>

view3

view

>

view

>

view

>

view code

id="outter" ontap="handletap1">

view1

id="middle" catchtap="handletap2">

view2

id="inner" ontap="handletap3">

view3

>

>

>

上面**中,點選 view3 會先後觸發 handletap3 和 handletap2(因為 tap 事件會冒泡到 view2,而 view2 阻止了 tap 事件冒泡,不再向父節點傳遞),點選 view2 會觸發 handletap2,點選 view1 會觸發 handletap1。

所有會發生冒泡的事件:

型別觸發條件

touchstart

觸控動作開始

touchmove

觸控後移動

touchend

觸控動作結束

touchcancel

觸控動作被打斷,如來電提醒,彈窗

tap觸控後馬上離開

longtap

觸控後,超過500ms再離開

a:推薦使用關鍵字為 catch 字首的非冒泡事件來阻止事件冒泡,請參見 非冒泡事件。

官方摘抄:

微信小程式 阻止冒泡事件

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

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

事件的類別分為幾種 點選事件 tap 長按事件 longtap 觸控事件 touchstart touchend touchcancel touchmove 其他 input submit.其中前三類是冒泡事件,其他的稱為非冒泡事件。寫乙個簡單的例子,就不一一貼出來了,wxml的檔案如下 view ...

小程式事件繫結 傳參 捕獲與冒泡

頁面中不需要傳參的事件 view bindtap click 我是事件 view view bind tap click 我是事件 view 需要傳參的事件 button bind tap click2 data name data age 18 id bt 我是按鈕 button js檔案 pag...