小程序模板網(wǎng)

微信小程序事件綁定

發(fā)布時間:2021-06-22 11:52 所屬欄目:小程序開發(fā)教程

事件類別:

tap:點擊事件;

longtap:長按事件;

touchstart:觸摸開始;

touchend:觸摸結(jié)束;

touchcansce:取消觸摸;

事件綁定:

bind綁定;

catch綁定;(能阻止事件冒泡)
mut-bind   互斥事件綁定
 

普通事件綁定

事件綁定的寫法類似于組件的屬性,如:

<view bindtap="handleTap">
    Click here!
</view>

如果用戶點擊這個 view ,則頁面的 handleTap 會被調(diào)用。

事件綁定函數(shù)可以是一個數(shù)據(jù)綁定,如:

<view bindtap="{{ handlerName }}">
    Click here!
</view>

此時,頁面的 this.data.handlerName 必須是一個字符串,指定事件處理函數(shù)名;如果它是個空字符串,則這個綁定會失效(可以利用這個特性來暫時禁用一些事件)。

自基礎(chǔ)庫版本 1.5.0 起,在大多數(shù)組件和自定義組件中, bind 后可以緊跟一個冒號,其含義不變,如 bind:tap ?;A(chǔ)庫版本 2.8.1 起,在所有組件中開始提供這個支持。

綁定并阻止事件冒泡

除 bind 外,也可以用 catch 來綁定事件。與 bind 不同, catch 會阻止事件向上冒泡。

例如在下邊這個例子中,點擊 inner view 會先后調(diào)用handleTap3和handleTap2(因為tap事件會冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父節(jié)點傳遞),點擊 middle view 會觸發(fā)handleTap2,點擊 outer view 會觸發(fā)handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

互斥事件綁定

自基礎(chǔ)庫版本 2.8.2 起,除 bind 和 catch 外,還可以使用 mut-bind 來綁定事件。一個 mut-bind 觸發(fā)后,如果事件冒泡到其他節(jié)點上,其他節(jié)點上的 mut-bind 綁定函數(shù)不會被觸發(fā),但 bind 綁定函數(shù)和 catch 綁定函數(shù)依舊會被觸發(fā)。

換而言之,所有 mut-bind 是“互斥”的,只會有其中一個綁定函數(shù)被觸發(fā)。同時,它完全不影響 bind 和 catch 的綁定效果。

例如在下邊這個例子中,點擊 inner view 會先后調(diào)用 handleTap3 和 handleTap2 ,點擊 middle view 會調(diào)用 handleTap2 和 handleTap1 。

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26657.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢