微信小程序--阻止冒泡事件

微信小程序事件的使用方式

• 在組件中綁定一個事件處理函數。

如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

• 在相應的Page定義中寫上相應的事件處理函數，參數是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

 

事件綁定和冒泡

事件綁定的寫法同組件的屬性，以 key、value 的形式。

• key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，bind和catch后可以緊跟一個冒號，其含義不變，如bind:tap、、catch:touchstart。
• value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。

　　bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

　　如在下邊這個例子中，點擊廣州市會先后調用handleTap3和handleTap2(因為tap事件會冒泡到 廣東省，而 廣東省 阻止了 tap 事件冒泡，不再向父節點中國傳遞)，點擊 廣東省 會觸發handleTap2，點擊中國 會觸發handleTap1。

 

<view id="outer" bindtap="handleTap1">
  中國
  <view id="middle" catchtap="handleTap2">
    廣東省
    <view id="inner" bindtap="handleTap3">
      廣州市
    </view>
  </view>
</view>

 

 　　在從.js代碼中寫入

//js
Page({
  　　handleTap1: function(event) {
    　　console.log("中國節點被點擊")
  　　},
  　　handleTap2: function(event) {
    　　console.log("廣東省節點被點擊")
  　　},
  　　handleTap3: function(event) {
    　　console.log("廣州市節點被點擊")
  　　}

　　})

　　

　　從控制台我們可以看到結果如下：

以此，大家以后就可以正確使用好事件去完成你的功能了。

---------------------------------------------------------------------------

菜鳥初到，如有問題希望可以指出。