HTML5移动端触摸事件
一、移动端事件问题
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类事件(定义滑动的事件)。我们还可以使用原生事件来自定义更高级的手势,例如双指放大缩小等。
HTML5移动端触摸事件的更多相关文章
- js 处理移动端触摸事件
在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的 ...
- Html5 移动端 触摸滑动事件
以下代码经过测试 没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"& ...
- 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]
转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onm ...
- H5移动端触摸事件:touchstart、touchend、touchmove
第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1 ...
- 移动端触摸(touch)事件
移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- HTML5触摸事件(touchstart、touchmove和touchend) (转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
随机推荐
- zabbix安装及简单使用备注
1.安装mysql yum install -y mariadb mariadb-server systemctl start mariadb 2.安装apache yum -y install ht ...
- T5大牛带你解析:如何实现分布式技术
1.分布式事务 2. 分布式锁 Java 原生 API 虽然有并发锁,但并没有提供分布式锁的能力,所以针对分布式场景中的锁需要解决的方案. 分布式锁的解决方案大致有以下几种: 基于数据库实现 基于缓存 ...
- Git实际使用
初始化 git init — cd到目录,初始化仓库 git init name — 新建文件,并初始化仓库 .gitignore — 忽略文件(https://github.com/gi ...
- .NET Core TDD 前传: 编写易于测试的代码 -- 缝
有时候不是我们不想做单元测试, 而是这代码写的实在是没法测试.... 举个例子, 如果一辆汽车在产出后没完成测试, 那么没人敢去驾驶它. 代码也是一样的, 如果项目未能进行该做的测试, 那么客户就不敢 ...
- Python + PyQt5 实现美剧爬虫可视工具
美剧<权力的游戏>终于要开播最后一季了,作为马丁老爷子的忠实粉丝,为了能够看得懂第八季复杂庞大的剧情架构,本人想着将前几季再稳固一下,所以就上美剧天堂下载来看,可是每次都上去下载太麻烦了, ...
- View的绘制流程
这是年假最后一篇笔记了,本篇文章的内容主要来自<android开发艺术探索>,在文章的最后有这本书的网上版本. 项目源码 目录 MeasureSpec SpecMode分类 UNSPECI ...
- 从PRISM开始学WPF(五)MVVM(一)ViewModel-更新至Prism7.1
0x5 MVVM [7.1updated]截止到目前,我们看到7.1的更新主要在三个地方 PrismApplication ,并且不再使用Bootstrapper 更新了unity,现在使用prism ...
- SqlSugar ORM 入门篇2 【查询】 让我们实现零SQL
SqlSugar在查询的功能是非常强大的,多表查询.分页查询 . 一对一查询.二级缓存.一对多查.WhenCase等复杂函数.Mapper功能.和拉姆达自定义扩展等,用好了是可以做到真正零SQL的一款 ...
- jQuery(八)、ajax
1.jQuery.ajax(url[, settings]) 通过HTTP请求加载远程数据. 注意:所有的settings选择都可以通过$.ajaxSetup()函数来全局指定. 回调函数 在实际开发 ...
- CentOS下MySQL的安装
MySQL数据库是一款比较常用的数据库,大家在练习安装时,可能会遇到各种各样的问题,请大家参考在CentOS系统下MySQL数据库的安装方式.如有任何问题,欢迎留言,本人随时解答. MySQL安装步骤 ...