小程序模板网

微信小程序双击事件,事件冒泡,bangtap,catchtap事件绑定

作者:xiaochun365,来自原文地址

 

一:单击、双击及长按事件

事件绑定

事件绑定的写法同组件的属性,以 key、value 的形式。

  • key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
  • value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

事件分类

  • touchstart 手指触摸
        • touchmove 手指触摸后移动
      • touchcancel 手指触摸动作被打断,如弹窗和来电提醒
    • touchend 手指触摸动作结束
  • tap 手指触摸后离开
  • longtap 手指触摸后后,超过350ms离开

单击事件 
由touchstart、touchend组成,touchend后触发tap事件。 
//wxml

 

				
  1. <button bindtouchstart="clickStart" bindtouchend="clickEnd" bindtap="clickTap">单击</button>

双击事件  由两个单击事件组成,两次间隔时间小于300ms认为是双击;微信官方文档没有双击事件,需要开发者自己定义处理。  //wxml

 

				
  1. <button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick">双击</button>

//js

 

				
  1. Page({
  2. data: {
  3. lastTapTime: 0
  4. },
  5. doubleClick: function (e) {
  6. var curTime = e.timeStamp
  7. var lastTime = e.currentTarget.dataset.time
  8. //var lastTime = this.data.lastTapTime
  9. console.log(lastTime)
  10. if (curTime - lastTime > 0) {
  11. if (curTime - lastTime < 300) {
  12. console.log("挺快的双击,用了:" + (curTime - lastTime))
  13. }
  14. }
  15. this.setData({
  16. lastTapTime: curTime
  17. })
  18. }
  19. })

长按

 

				
  1. <button type="primary" bindtouchstart="startClick" bindtouchend="endClick" bindlongtap="longClick" bindtap="holdClick">点住别撒手</button>
 

二:事件冒泡,bangtap,catchtap事件绑定

//wxml

 

				
  1. <view class="view1" bindtap="view1">
  2. <view class="view2" bindtap="view2">
  3. <view class="view3" catchtap="view3"></view>
  4. </view>
  5. </view>

//js

 

				
  1. Page({
  2. data: {
  3. }, view1: function () {
  4. console.log("---view1 bindtap click")
  5. }, view2: function () {
  6. console.log("--view2 bindtap click")
  7. }, view3: function () {
  8. console.log("-view3 catchtap click ")
  9. }
  10. })

//点击view3

 

				
  1. -view3 catchtap click

//点击view2

 

				
  1. --view2 bindtap click
  2. ---view1 bindtap click

//点击view1

 

				
  1. ---view1 catchtap click  


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23523.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询