首页 / 更多教程 / 微信小程序（触控事件）
微信小程序（触控事件）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序（触控事件），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4713字，纯文字阅读大概需要7分钟。
内容图文
事件简介
①本质：事件是视图层到逻辑层的通讯方式。
②作用：事件可以将用户的行为反馈到逻辑层进行处理。
③应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
④参数：事件对象可以携带额外信息，如id，dataset，touches
事件类型
在编写代码中，使用频率高的事件方式是：
- 单击：tap
- 长按：longtap
- 滑动：touchstart、touchmove、touchend、touchcancel
常见的事件类型：
注意：touch触屏系列事件常结合画布canvas组件使用，简单了解即可。
事件绑定
事件绑定的写法同组件的属性，以key、value的形式。
- key以bind或catch开头，然后跟上事件的类型，如bindtap、catchtap等，自基础库版本1.5.0起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如：bind:tap、catch:touchstart
- value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错
- bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
案例：（bindtap和catchtap的区别）
<view class="parent" bindtap="parentFn">
<view class="child" catchtap="childFn"></view>
</view>
.parent{
width: 100%;
height: 200rpx;
background: palegreen;
}
.child{
width: 200rpx;
height: 200rpx;
background: greenyellow;
}
parentFn(){
console.log("父级")
},
childFn(){
console.log("子级")
},
bindtap改为catchtap
触控事件
（1）触控事件之单击tap
分析：单击事件由touchstart、touchend组成,touchend后触发tap事件。
事件对象event：当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，event对象包含参数timeStamp
案例：
<button bindtouchstart="startFn" bindtouchend="endFn" bindtap="tapFn">单击</button>
startFn(event){
console.log(event.timeStamp+"- - -触屏开始")
},
endFn(event){
console.log(event.timeStamp+"- - -触屏结束")
},
tapFn(event){
console.log(event.timeStamp+"- - -单击")
},
验证后可以发现tap顺序为touchstart→touchend→tap
（2）触控事件之双击
注意： 微信官方文档没有双击事件，需要开发者自己定义处理。
分析： 双击事件可以由两个单击事件组成，只要两次点击的间隔时间小于600ms（或者300ms）则认为是双击行为；
顺序： 双击执行顺序为touchstart → touchend → tap → touchstart → touchend → tap
<button bindtap="dbFn">双击</button>
data:{
//最后触摸屏幕的加载时间
lastTimeStamp:0
}
dbFn(event){
const timeStamp=event.timeStamp;
console.log(timeStamp+"触摸时距离页面打开的毫秒数")
const lastTimeStamp = this.data.lastTimeStamp;
if (lastTimeStamp>0){
console.log("不是第一次触摸")
if(timeStamp-lastTimeStamp<600){
console.log("完成双击")
}
}else{
console.log("是第一次触摸")
}
this.setData({
lastTimeStamp:timeStamp
})
console.log("上一次触摸距离打开页面的毫秒数"+this.data.lastTimeStamp)
},
触控事件之长按longtap
长按事件手指触摸后，超过350ms再离开，触发长按事件longtap
<button bindtouchstart="touchstartFn" bindlongtap="longtapFn" bindtouchend="touchendFn" bindtap="bindtapFn">长按</button>
touchstartFn(){
console.log("触屏开始")
},
longtapFn(){
console.log("长按")
},
touchendFn(){
console.log("触屏结束")
},
bindtapFn(){
console.log("单击")
},
长按后控制台输出结果：
翻译为：“\longtap\”事件已弃用，请改用“longpress”事件。
开发问题：通过上个案例，可以看出一个元素上同时绑定了点击事件与长按事件时，当长按事件触发时，点击事件也会被触发
解决办法：记录手指点下与手指抬起之间的时间差 ，在触发tap事件前 判断时间差，若小于350 就触发tap ，否则视为长按
<button bindtouchstart="touchStartFn" bindlongtap="longFn" bindtouchend="touchEndtFn" bindtap="bindTapFn">长按</button>
data:{
// 长按
touchStart:0,
touchEnd:0
},
touchStartFn(event){
console.log(event.timeStamp+"触屏开始时间")
this.setData({
touchStart:event.timeStamp
})
},
longFn(event){
console.log(event.timeStamp+"长按时间")
},
touchEndtFn(event){
console.log(event.timeStamp+"触屏结束时间")
this.setData({
touchEnd:event.timeStamp
})
},
bindTapFn(event){
if (this.data.touchEnd - this.data.touchStart<350){
console.log(event.timeStamp+"单击")
}
},
触控事件之长按longpress
接下来将longtap改为longpress，进行测试
验证后发现，longpress长按事件已经避免了旧版longtap事件与tap事件同时触发的bug，所以以后开发用longpress解决长按事件即可。
触发顺序小结：
单击、双击、长按属于点触事件，会触发touchstart、touchend、tap事件
触控事件之滑动touch系列
滑动事件由touchstart、touchmove、touchend组成，一般指的是手指触摸屏幕并移动。
<button bindtouchstart="sFn" bindtouchmove="mFn" bindtouchend="eFn">移动</button>
sFn(event){
console.log(event)
},
mFn(event){
console.log(event)
},
eFn(event){
console.log(event)
},
案例：
以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大（注意跟数学象限的区别）
坐标轴及业务逻辑分析：
①假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by < ay
②同理，向右滑动到C(cx,cy),满足cx > ax；向下滑动到D(dx,dy),满足dy > ay；向左移动到E(ex，ey)满足ex < ax
③计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n
④计算r = m/n,如果r > 1,视为向上滑动，同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动
①初始化数据
data: {
startPoint:[0,0]
},
②开始触摸
③触摸点移动，动态计算判断方向
内容总结
以上是互联网集市为您收集整理的微信小程序（触控事件）全部内容，希望文章能够帮你解决微信小程序（触控事件）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。