微信小程式事件綁定（詳解）

事件類别：

tap：點選事件；

longtap：長按事件；

touchstart：觸摸開始；

touchend：觸摸結束；

touchcansce：取消觸摸；

事件綁定：

bind綁定；

catch綁定；（能阻止事件冒泡）

mut-bind   互斥事件綁定

普通事件綁定

事件綁定的寫法類似于元件的屬性，如：

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

如果使用者點選這個 view ，則頁面的 handleTap 會被調用。

事件綁定函數可以是一個資料綁定，如：

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

此時，頁面的 this.data.handlerName 必須是一個字元串，指定事件處理函數名；如果它是個空字元串，則這個綁定會失效（可以利用這個特性來暫時禁用一些事件）。

自基礎庫版本 1.5.0 起，在大多數元件和自定義元件中， bind 後可以緊跟一個冒号，其含義不變，如 bind:tap 。基礎庫版本 2.8.1 起，在所有元件中開始提供這個支援。

綁定并阻止事件冒泡

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

例如在下邊這個例子中，點選 inner view 會先後調用handleTap3和handleTap2(因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點選 middle view 會觸發handleTap2，點選 outer view 會觸發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>
           

互斥事件綁定

自基礎庫版本 2.8.2 起，除 bind 和 catch 外，還可以使用 mut-bind 來綁定事件。一個 mut-bind 觸發後，如果事件冒泡到其他節點上，其他節點上的 mut-bind 綁定函數不會被觸發，但 bind 綁定函數和 catch 綁定函數依舊會被觸發。

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

例如在下邊這個例子中，點選 inner view 會先後調用 handleTap3 和 handleTap2 ，點選 middle view 會調用 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>
           

如果你也想開發軟體或者小程式的話，可以通過第三方專業開發平台，來幫助你實作開發需求：廈門在乎科技-專注小程式、app、網站開發