用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:34

作者:xiaochun365,来自原文地址一:单击、双击及长按事件事件绑定事件绑定的写法同组件的属性,以 key、value 的形式。key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstartvalue 是一个字符串 ...

作者: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. bindtouchstart="clickStart" bindtouchend="clickEnd" bindtap="clickTap">单击

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

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

//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. type="primary" bindtouchstart="startClick" bindtouchend="endClick" bindlongtap="longClick" bindtap="holdClick">点住别撒手

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

//wxml

  1. class="view1" bindtap="view1">
  2. class="view2" bindtap="view2">
  3. class="view3" catchtap="view3">

//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
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏