微信小程序 触控事件详细介绍


Posted in Javascript onOctober 17, 2016

微信小程序 触控事件:

            微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。
接下来把文档copy过来

原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

》》》什么是事件

  1. 事件是视图层到逻辑层的通讯方式。
  2. 事件可以将用户的行为反馈到逻辑层进行处理。
  3. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  4. 事件对象可以携带额外信息,如id, dataset, touches。

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view> 

在相应的Page定义中写上相应的事件处理函数,参数是event。

Page({ 
 tapName: function(event) { 
 console.log(event) 
 } 
})

可以看到log出来的信息大致如下:

{ 
"type": "tap", 
"timeStamp": 1252, 
"target": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"currentTarget": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"touches": [{ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
}], 
"detail": { 
 "x": 30, 
 "y": 12 
} 
}

事件详解

事件分类

事件分为冒泡事件和非冒泡事件:

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

》》》事件分类

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

》》》事件绑定

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

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

上面简单介绍了小程序事件基础,是时候彰显"事件"的威力:

  1. 单击(tap)
  2. 双击(dbtap)
  3. 长按(longtap)
  4. 滑动
  5. 多点触控

1.单击

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

 微信小程序 触控事件详细介绍

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
}

2.双击

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

 微信小程序 触控事件详细介绍

<view>
 <button type="primary" bindtap="mytap">点我吧</button>
</view>

 微信小程序 触控事件详细介绍

 3.长按

长按事件手指触摸后,超过350ms再离开。

 微信小程序 触控事件详细介绍

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
 bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},//长按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')
 },mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
}

单击、双击、长按属于点触事件,会触发touchstart、touchend、tap事件,touchcancel事件只能在真机模拟,不多说了。

事件 触发顺序
单击 touchstart → touchend → tap
双击 touchstart → touchend → tap → touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

4.滑动

手指触摸屏幕并移动,为了简化起见,下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成

 微信小程序 触控事件详细介绍

坐标图:

 微信小程序 触控事件详细介绍

  1. 以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕,Y轴越往下坐标值越大(注意跟数学象限的区别)。
  2. 假设A点为touchstart事件触摸点,坐标为A(ax,ay),然后手指向上滑动到点B(bx,by),就满足条件by < ay;
  3. 同理,向右滑动到C(cx,cy),满足cx > ax;向下滑动到D(dx,dy),满足dy > ay;向左移动到E(ex,ey)满足ex < ax.
  4. 计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n
  5. 计算r = m/n,如果r > 1,视为向上滑动。
  6. 同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比,得出向右向下向左的滑动。

以上没考虑r为1的情况。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧</button>
</view>

微信小程序 触控事件详细介绍

5.多点触控

由于模拟器尚不支持多点触控,内测开放后,继续补充。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
微信小程序之购物车功能
Sep 23 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 #Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 #Javascript
学习Node.js模块机制
Oct 17 #Javascript
微信小程序 火车票查询实例讲解
Oct 17 #Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 #Javascript
Node.js下自定义错误类型详解
Oct 17 #Javascript
js HTML5多媒体影音播放
Oct 17 #Javascript
You might like
php时间不正确的解决方法
2008/04/09 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python数据爬下来保存的位置
2020/02/17 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
施工员岗位职责
2014/03/16 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
辩护词格式
2015/05/22 职场文书
求职信如何撰写?
2019/05/22 职场文书
年终工作总结范文
2019/06/20 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python