微信小程序的事件大全

这里写目录标题

  • bind与catch的区别
    • ----------------
    • 点击事件(单击):bindtap
    • 双击事件
    • 长按事件:bindlongpress、bindlongtap
      • 长按与点击事件的执行顺序与关系
    • ----------------
    • 键盘输入事件:bindinput
    • 回车事件:bindconfirm
    • 输入框聚焦:bindfocus
    • 输入框失焦:bindblur
    • value改变事件:bindchange
    • ---------------------
    • 触摸事件:
      • 触摸动作开始:bindtouchstart
      • 触摸动作结束:bindtouchend
      • 触摸过程移动:bindtouchmove
      • 触摸动作被打断:bindtouchcancel
    • ----------------
    • 提交表单事件:bindsubmit
    • 重置表单事件:bindreset

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

你可能感兴趣的:(小程序,小程序)