微信小程序绑定事件解析

小程序点击事件有两种bindtap和catchtap，前者不会阻止冒泡事件向上冒泡，后者则可以阻止向上冒泡。

1.事件分类：

 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 
 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

区分bindtap和catchtap示例代码：

<view bindtap="onclick1">
    onclick1
    <view catchtap="onclick2">onclick2
    <view bindtap="onclick3">onclick3view>
view>

Page({
    onclick1:function(e){  //输出结果是：onclick1
      console.log("onclick1")
    },
    onclick2: function (e) {  //输出结果是：onclick2
      console.log("onclick2")
    },
    onclick3: function (e) {  //输出结果：onclick3  onclick1
      console.log("onclick3")
    },
})

2.列表item事件细节处理

一般在相应的Page定义中写上相应的事件处理函数（参数是event），都能满足需求。

但是，当item中view嵌套层级复杂且内层view不需要绑定事件时，点击item拿到对应的id就需要阻止向上冒泡事件。

我们都知道js中阻止冒泡事件方法：e.stopPropagation()

而小程序中微信对js部分高度封装，是没有上面的方法的，那若何才能阻止事件向上冒泡呢？

且看列子：

< template name="test" >

    

< view >

     < image src= '../images/icon_logo.png'> image >

view >

    

  template>

  

< block wx:for= "{{testData}}" wx:for-item= "item" wx:key= "pro">

< template is= "test" data= "{{...item}}"> template >

block >

page({

data:{

testData:[{id:'1',title:'Q'}],

      click1: function(e){

    wx.showToast({

    // title: e.target.dataset.postid + "",//点到不同view层上，返回值不一样

    title: e.currentTarget.dataset.postid + "",

     })

}

}

})

分别点击外层和里层view时：e.target.dataset.postid结果分别是1和undefined；

分别点击外层和里层view时：e.currentTarget.dataset.postid结果分别是1和1；