HTML5移动端触摸事件
2024-09-01 14:59:49
一、移动端事件问题
1.click事件300ms延迟问题
2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如果有就会缩放,如果没有则是一个click事件。所以cilck操作会有卡顿感觉。
2.dblclick事件失效
由于双击缩放的存在,移动端的dblclick事件也失效了。
二、移动端触摸事件
- touchstart 在屏幕上按下手指时触发
- touchmove 在屏幕上移动手指时触发
- touchend 在屏幕上抬起手指时触发
- touchcancel 触点由于某些原因被中断时触发。例如触摸时电话接入或者弹出框,都会中断触摸。一般会在这时暂停游戏、存档等操作。
三、TouchEvent事件对象
TouchEvent继承了UIEvent和Event,事件对象中包含很多内容,这里挑一些常用的:
touches 位于当前屏幕上所有触摸点列表(TouchList对象,包含若干个Touch对象)
targetTouches 起始于当前DOM元素,且没有结束的触摸点列表,是touches的一个严格子集(TouchList对象)
changedTouches 当前事件发生变化的触摸点列表(TouchList对象).对于touchstart,新增加的触点;对于touchmove,和上一次事件比较发生变化的触点(任何一个属性);对于touchend,离开屏幕的触点。
currentTarget 捕获层的DOM节点(即绑定事件的元素)
target 触发事件的DOM节点(实际触发的元素,target通常是位于currentTarget的子节点或其本身)
srcElement 与target本质相同,在早期的firfox中没有srcElement,IE中没有target
timeStamp 返回一个时间戳,从 epoch 开始的毫秒数。epoch 是一个事件参考点,在这里,它是客户机启动的时间。
type 当前事件的类型,如"touchstart"
altKey 布尔值,指明触摸事件触发时,键盘 alt 键是否被按下。
ctrlKey 布尔值,指明触摸事件触发时,键盘 ctrl 键是否被按下。
每个触摸点(Touch对象)包含了如下属性:
screenX / screenY 触摸点在屏幕中的位置
pageX / pageY 触摸点在整个文档中的位置
clientX / clientY 触摸点在可视区域中的位置
identifier 每个触摸点的唯一标识符
target 该触摸点最开始触摸的dom元素,即触发它的元素,无论触点移动到了哪里,该值都不会改变。
radiusX / radiusY 触摸点大概是一个椭圆,分别为水平轴半径/垂直轴半径(支持不好)
rotationAngle 触摸点旋转角度(顺时针)
force 压力大小,从0.0(没有压力)到1.0(最大压力)的浮点数
四、基于触摸事件的开发
以上的touch事件是HTML标准的内置事件,因为移动端的单双击事件问题和更丰富的用户需求,仅仅依赖原生事件来开发是不够方便的,因此出现了一些自定义事件的库。比如jQuery Mobile库和zeptojs库中的tap类事件(用于代替click事件)和swipe类事件(定义滑动的事件)。我们还可以使用原生事件来自定义更高级的手势,例如双指放大缩小等。
最新文章
- springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪
- 简化注解shh框架
- ios8调用相机报警告: Snapshotting a view that has not been rendered results in an empty snapshot. Ensure you(转)
- phpcms_v9 多图字段 内容页,首页,分页自定义字段调用
- CentOS 7.0下面安装并配置Spark
- hdwiki中model模块的应用
- 在CentOS 7上给一个网卡分配多个IP地址
- js中的字符串
- c++中的名字查找
- Ffmpeg和SDL如何同步视频(转)
- [Unity Physics]Physics - Rigidbody、Collider
- iOS 之 编外知识点
- 在Android中用Kotlin的Anko运行后台任务(KAD 09)
- 去掉chrome浏览器中input获得焦点时的带颜色边框呢
- 使用CrashHandler来获取应用的crash信息
- 2016/12/22 dplの课练
- 完美解决distinct中使用多个字段的方法
- Java之JSON处理(JSONObject、JSONArray)
- java实现获取当前年月日 小时 分钟 秒 毫秒
- CDH:cdh5环境搭建
热门文章
- 原生的 django 分页
- .NET 机器学习生态调查
- gulp源码解析(一)—— Stream详解
- 【死磕 Spring】----- IOC 之 加载 Bean
- break、continue以及return的区别
- cassandra读源码---Streaming
- QPainterPath 不规则提示框(二)
- BaiduSpeechDemo【百度语音SDK集成】(基于v3.0.8.1)
- 【一套代码小程序&;Native&;Web阶段总结篇】可以这样阅读Vue源码
- python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍