小程序自动触发点击事件,微信小程序按钮绑定事件

一、点击事件

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

wxml代码：

bindtap

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代码：

bindlongpress

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

 

 

<168飞艇6种不亏钱的方法="text-indent:50px;">wxml代码：

bindlongpress

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事件