4.微信小程序按钮事件

1. 绑定点击事件

1.1bindtap和catchtap都可以实现点击效果

2. 使用

<view  data-name='{{item.name}}' bindtap="goToTimeLine">

 goToTimeLine(event){
    //携带name值参数传递，wxml页面中data-xxx和变量一致
    console.log(event.currentTarget.dataset.name)
    wx.navigateTo({
      url: '../../pages/timeline/timeline',
    })
  }

3. bindtap和catchtap区别

3.1

• 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
• 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。

3.2 小程序中事件分为冒泡事件和非冒泡事件。

• bindtap 事件绑定不会阻止冒泡事件向上冒泡

• catchtap 事件绑定可以阻止冒泡事件向上冒泡
  比如：

  
  image.png
  

  wxml代码：

<view id="outer" bindtap="out">
    outer view
    <view id="middle" bindtap="middle">
        middle view
        <view id="inner" bindtap="inner">
            inner view
        </view>
    </view>
</view>

js

out:function(e){
    console.log("--out bindtap click")
}, middle: function (e) {
    console.log("--middle bindtap click")
}, inner: function (e) {
    console.log("--inner bindtap click")
}

bindtap:
点击out view打印出一条log --> out bindtap click
点击middle view打印出两条log --> middle bindtap click--out bindtap click
点击innew view打印出三条log --> inner bindtap click--middle bindtap click--out bindtap click
可以看出bindtap不阻止向上冒泡，所以点击inner一直冒泡到了最外层。catchtap: 修改middle view的bindtap为catchtap
点击out view打印出一条log --> out bindtap click（因为没有上层元素故而无法向上冒泡）
点击middle view打印出一条log --> middle bindtap click（catchtap阻止向上冒泡）
点击innew view打印出两条log --> inner bindtap click--middle bindtap click（catchtap阻止向上冒泡）