作者:xiaochun365,来自原文地址
一:单击、双击及长按事件
事件绑定
事件绑定的写法同组件的属性,以 key、value 的形式。
-
key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
-
value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
事件分类
-
touchstart 手指触摸
-
-
-
-
touchcancel 手指触摸动作被打断,如弹窗和来电提醒
-
-
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
|