微信小程序的事件大全

bind与catch的区别

bind和catch:
bind事件绑定不会阻止冒泡事件往上冒泡,简单来说,bind所绑定的事件对应会向上传递,让自己的父组件响应对应的事件。而catch事件会把对应的事件阻拦在自己这里,只有自己能够响应对应事件。、

----------------

点击事件(单击):bindtap

双击事件

要想实现双击事件,只能通过我们写代码判断用户点击是否是双击行为。
思想:记录下用户两次点击的时间戳,两个时间戳相减如果小于300毫秒,则判断是双击事件。

.wxml代码:

<button data-time="{{lastTapTime}}" data-title="双击" bindtap="doubleClick">双击事件</button>

.js代码:

  data: {
    lastTapTime:0,
  },
  doubleClick: function (e) {
    var curTime = e.timeStamp
    var lastTime = e.currentTarget.dataset.time  
    // 通过e.currentTarget.dataset.time 访问到绑定到button组件的自定义数据
    console.log("上一次点击时间:"+lastTime)
    console.log("这一次点击时间:" + curTime)
    console.log('--------------------------------');
    if (curTime - lastTime > 0) {
      if (curTime - lastTime < 300) {//判断为双击事件
        console.log("您双击了,用了:" + (curTime - lastTime))
      }
      
    }
    this.setData({
      lastTapTime: curTime
    })
  },

长按事件:bindlongpress、bindlongtap

长按事件是指 触摸超过350ms再离开

以前的(旧版)长按事件 bindlongtap 执行完后会触发点击事件 bindtap
现在的(新版)长按事件 bindlongpress 执行完后并不会触发点击事件 bindtap

长按与点击事件的执行顺序与关系

事件触发顺序
点击事件bindtouchstart --> bindtouchend --> tap
旧版长按事件bindtouchstart --> bindlongtap --> bindtouchend --> tap
新版长按事件bindtouchstart --> bindlongpress --> bindtouchend
*[旧版长按事件]:bindlongtap
*[新版长按事件]:bindlongpress

----------------

键盘输入事件:bindinput

键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0
起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。

回车事件:bindconfirm

输入框聚焦:bindfocus

输入框失焦:bindblur

value改变事件:bindchange

---------------------

触摸事件:

触摸动作开始:bindtouchstart

触摸动作结束:bindtouchend

触摸过程移动:bindtouchmove

触摸动作被打断:bindtouchcancel

如来电提醒,弹窗

----------------

提交表单事件:bindsubmit

重置表单事件:bindreset

  • 7
    点赞
  • 93
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北海南风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值