事件类型
在编写代码中,使用频率高的事件方式是
事件类型
常见的事件类型
事件绑定
事件绑定的写法同组件的属性,以 key、value 的形式
①key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtap等。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart
②value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错
③bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡
(1)触控事件之单击tap
分析:单击事件由touchstart、touchend组成,touchend后触发tap事件。
事件对象event:当事件回调触发的时候,逻辑层绑定该事件的处理函数会收到一个事件对象,event对象包含参数timeStamp
触控事件
<button
type="primary"
bindtouchstart="bindtouchstartFn"
bindtouchend="bindtouchendFn"
bindtap="bintapFn"
>点击</button>
bindtouchstartFn(event){
console.log(event.timeStamp + '-touchstart')
},
bindtouchendFn(event){
console.log(event.timeStamp + '-touchend')
},
bintapFn(event){
console.log(event.timeStamp + 'touchtap')
},
验证后可以发现tap顺序为touchstart→touchend→tap
(2)触控事件之双击
注意:
微信官方文档没有双击事件,需要开发者自己定义处理。
分析:
双击事件可以由两个单击事件组成,只要两次点击的间隔时间小于600ms(或者300ms)则认为是双击行为;
顺序:
双击执行顺序为touchstart → touchend → tap → touchstart → touchend → tap
(2)触控事件之双击
验证:
<button
type="primary"
bindtap="bintapFn"
>点击</button>
data: {
//最后触摸页面时的距离页面大开的毫秒数 默认为0
lastTiemStamp:0
},
此时如果点击按钮的时间间隙小于600ms,则会认为是双击行为。
data: {
//初始化touchstart坐标
lastTiemStamp: 0
},
//触摸事件判断单机还是双击
bintapFn(event) {
//触摸式打开页面的毫秒数
var timeStamp = event.timeStamp;
//上一次触摸页面距离打开的毫秒数
var lastTimeStamp = this.data.lastTimeStamp;
if (lastTimeStamp > 0) {
//不是第一次触摸
if (timeStamp - lastTimeStamp < 600) {
console.log(event.timeStamp +