推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序双击事件，事件冒泡,bangtap,catchtap事件绑定
发布时间:2020-11-29一：单击、双击及长按事件
事件绑定
事件绑定的写法同组件的属性，以 key、value 的形式。
key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
事件分类
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如弹窗和来电提醒
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后后，超过350ms离开
单击事件
由touchstart、touchend组成,touchend后触发tap事件。
//wxml
<button bindtouchstart="clickStart" bindtouchend="clickEnd" bindtap="clickTap">单击</button>
双击事件 由两个单击事件组成，两次间隔时间小于300ms认为是双击；微信官方文档没有双击事件，需要开发者自己定义处理。 //wxml
<button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick">双击</button>
//js
Page({
data: {
lastTapTime: 0
},
doubleClick: function (e) {
var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset.time
//var lastTime = this.data.lastTapTime
console.log(lastTime)
if (curTime - lastTime > 0) {
if (curTime - lastTime < 300) {
console.log("挺快的双击，用了：" + (curTime - lastTime))
}
}
this.setData({
lastTapTime: curTime
})
}
})
长按
<button type="primary" bindtouchstart="startClick" bindtouchend="endClick" bindlongtap="longClick" bindtap="holdClick">点住别撒手</button>
二：事件冒泡,bangtap,catchtap事件绑定
//wxml
<view class="view1" bindtap="view1">
<view class="view2" bindtap="view2">
<view class="view3" catchtap="view3"></view>
</view>
</view>
//js
Page({
data: {
}, view1: function () {
console.log("---view1 bindtap click")
}, view2: function () {
console.log("--view2 bindtap click")
}, view3: function () {
console.log("-view3 catchtap click ")
}
})
//点击view3
-view3 catchtap click
//点击view2
--view2 bindtap click
---view1 bindtap click
//点击view1
---view1 catchtap click
