一、移动端事件问题

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移动端触摸事件的更多相关文章

  1. js 处理移动端触摸事件

    在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的 ...

  2. Html5 移动端 触摸滑动事件

    以下代码经过测试  没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"& ...

  3. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  4. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]

    转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onm ...

  5. H5移动端触摸事件:touchstart、touchend、touchmove

    第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1 ...

  6. 移动端触摸(touch)事件

    移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文 ...

  7. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  8. HTML5触摸事件(touchstart、touchmove和touchend) (转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  9. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

随机推荐

  1. spring boot 2.0 集成 shiro 和 pac4j cas单点登录

    新开的项目,果断使用  spring boot  最新版本  2.0.3 ,免得后期升级坑太多,前期把雷先排了. 由于对 shiro 比较熟,故使用 shiro 来做权限控制.同时已经存在了 cas  ...

  2. js node.js 编写命令工具demo

    1 创建文件夹cli-demo 2 执行npm init  3 创建cli.js 文件 内容如下: //js文件变成可执行文件 #!/usr/bin/env node console.log(&quo ...

  3. 【Android Studio安装部署系列】十五、Android studio添加Assets目录

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio新建项目时是没有assets目录,需要自己手动创建. app右键——New——Folder——Asset ...

  4. SpringBoot实用小知识之Maven中dependencys和dependencymanagement区别

    利用pom管理引用包时,如果是单项目的话就直接在dependencies引用了,若有一个大工程项目里面包含多个子模块,则为了所有项目模块包的版本统一和好管理,则需要用到dependencyManage ...

  5. Python:说说字典和散列表,散列冲突的解决原理

    散列表 Python 用散列表来实现 dict.散列表其实是一个稀疏数组(总是有空白元素的数组称为稀疏数组).在一般书中,散列表里的单元通常叫做表元(bucket).在 dict 的散列表当中,每个键 ...

  6. Data Lake Analytics + OSS数据文件格式处理大全

    0. 前言 Data Lake Analytics是Serverless化的云上交互式查询分析服务.用户可以使用标准的SQL语句,对存储在OSS.TableStore上的数据无需移动,直接进行查询分析 ...

  7. 【设计模式+原型理解】第三章:javascript五种继承父类方式

    [前言] 我们都知道,面向对象(类)的三大特征:封装.继承.多态 继承:子类继承父类的私有属性和公有方法 封装:把相同的代码写在一个函数中 多态: ->重载:JS严格意义上是没有重载,但可以通过 ...

  8. .NET移动开发,关于发布IOS的方法(本人亲身经历折腾很久终于成功)

    前情提要:这位.NET程序员兄弟使用Smobiler开发了一个APP,尽管Smobiler云平台已经最大限度的简化了iOS应用的打包操作,但仍绕不开苹果公司强制要求的p12文件,p12文件需要开发者自 ...

  9. C# 实体类转json数据过滤掉字段为null的字段

    C# 实体类转json数据过滤掉字段为null的字段 语法如下: var jsonSetting = new JsonSerializerSettings {NullValueHandling = N ...

  10. c#实战开发:以太坊Geth 命令发布智能合约 (五)

    Token的合约代码我们参考Token-Factory的代码. 打开  https://remix.ethereum.org/#optimize=false&version=soljson-v ...