微信小程序的点击、双击、长按事件

一、点击事件

点击事件是最常用的事件，轻点即可触发事件，如果想要添加参数即可通过 data- 加事件名 的方式添加参数，通过 event参数的target.dataset.加事件名 获取。我们来看看样例：

wxml代码：

<view class='container'>
  <button bindtap='test' data-name='tap'>bindtap</button>
</view>

js代码： 

test:function(e){
    console.log("点击事件")
    console.log(e.target.dataset.name)
  }

结果如下图：

 

二、双击事件

双击触发事件，微信官方文档没有，但是我们可以根据参数event的timeStamp属性对两次点击事件处理达到双击事件的目的，如果想要添加参数即可通过 data- 加事件名 的方式添加参数，通过 event参数的target.dataset.加事件名 获取。我们来看看样例：

wxml与之前一致

js代码：

test: function(e) {
    // 获取这次点击时间
    var thisTime = e.timeStamp;
    // 获取上次点击时间 默认为0
    var lastTime = this.data.lastTime;
    // 打印这次点击时间
    console.log("这次时间：" + thisTime)
    // 打印参数
    console.log("参数：" + e.target.dataset.name)
    if (lastTime != 0) {
      if (thisTime - this.data.lastTime < 500)
        console.log("双击事件")
    }
    // 赋值
    this.setData({
      lastTime: thisTime
    })
  }

运行截图如下：

三、长按事件

长按事件以前为bindlongtap，现在改为bindlongpress，如果想要添加参数即可通过 data- 加事件名 的方式添加参数，通过 event参数的target.dataset.加事件名 获取。我们来看看样例：

wxml代码：

<view class='container'>
  <button bindlongpress='test' data-name='tap'>bindlongpress</button>
</view>

js代码：

 test: function(e) {
    // 打印参数
    console.log("参数：" + e.target.dataset.name)
    //打印双击事件
    console.log("长按事件")
  }

 

运行截图如下：

四、总结

值得一提的是：点击、双击、长按事件（bindlongtap）均会触发bindtouchstart、bindtouchend、tap（press）事件。他们关系如下：

事件名	触发顺序
点击事件	bindtouchstart - bindtouchend - tap
双击事件	bindtouchstart - bindtouchend - tap - bindtouchstart - bindtouchend - tap
以前的长按事件（bindlongtap）	bindtouchstart - bindlongtap - bindtouchend - tap
*现在的长按事件（bindlongpress）	bindtouchstart - bindlongpress - bindtouchend

 

 

 

 

 

 

注意：如果一个组件拥有press和tap事件，那么点击触发tap事件，长按不会触发tap事件