在上代码之前,微信小程序点击事件,长按事件的触发顺序需要我们了解一下下
事务分类
touchstart:手指触摸
longtap:手指触摸后后,超过350ms离开
touchend:手指触摸动作结束
tap:手指触摸后离开
事件 | 触发顺序 |
单击 | touchstart → touchend → tap |
长按 | touchstart → longtap → touchend → tap |
通过上表格可以发现,单击事件与长按事件的区别就在于 longtap事件,所以我们通过longtap事件进行区分。现在可以开始上代码啦
.xwml 文件
<view >
<image src='{{urls}}' class="asd" mode="aspectFit" bindtap='nophonefull' id="{{urls}}" bindlongtap="bingLongTap" bindtouchstart="touchStart" bindtouchend="touchEnd"></image>
</view>
.js 文件
//定义用到的变量
data: {
startTime:0, //点击开始时间
endTime:0 //点击结束时间
}
//手指触摸开始赋值
touchStart: function (e) {
this.startTime = e.timeStamp;
}
//手指触摸结束赋值
touchEnd: function (e) {
this.endTime = e.timeStamp;
}
// nophonefull 不管点击还是长按都会触发的事件
nophonefull: function () {
//通过判断手指触摸时间来判断是否是点击事件,当时间差小于350时,为点击事件
if (this.endTime - this.startTime < 350) {
//这里可以做点击事件的处理啦
}
}
//只有长按事件才会触发
bingLongTap : function(e){
//这里可以做长按事件要处理的
}
以上就是区分点击事件和长按事件的方法啦,如果有不对的地方或者有跟简单的方法,欢迎留言