1、Touch事件简介
pc上的web页面鼠
标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如
iphone、ipod
Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel
事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2、Touch事件与Mouse事件的出发关系
在触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事

件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会
触发上一个事件的mouseout事件。

3、gesture事件
Gesture事件,包括手指点击(click),轻拂
(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情,它只在有两根

或多根手指放在屏幕上的时候触发,事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例)
信息和rotation(两根手指间连线转动的角度)信息。这个事件是对touch事件的更高层的封装,和touch一样,它同样包括
gesturestart,gesturechange,gestureend。
gesture事件触发过程:
Step 1、第一根手指放下,触发touchstart
Step 2、第二根手指放下,触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
Step 9、提起第一根手指,触发touchend

iphone、ipod Touch、ipad触屏时的js事件的更多相关文章

  1. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  2. 转:触屏中的js事件

    一.触摸事件 ontouchstartontouchmoveontouchendontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们 ...

  3. 移动端触屏滑动,JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  4. The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .pn

    xcode 6.3 载发生时的应用'Missing recommended icon file - The bundle does not contain an app icon for iPhone ...

  5. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

  7. 移动端触屏click点击事件延迟问题,以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  8. 'Missing recommended icon file - The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format'

    创建120像素的高分辨率和60个像素定期如上,苹果文档中提到,并设置名称的新图标.例如,icon-120.png和icon-152.png. 将这个图标到你的项目资源文件夹并添加该图标到项目: 在此之 ...

  9. The bundle does not contain an app icon for iPhone / iPod Touch of exactly '57x57' pixels

    遇到这个问题问题,搜索了一圈要么不知道,要么喊改deploymenet target, 最后我是在项目属性-info-icon files(ios5)-下面添加了一个icon,然后弄了个icon.pn ...

随机推荐

  1. 2017-3-01 test

    三道好像都是HDU上的题QAQ 题目名称都没改,差评 T1:http://acm.hdu.edu.cn/showproblem.php?pid=5073 被卡精度了QAQ 先排一发序,然后发现最后未动 ...

  2. NOIP2017赛前模拟10月30日总结

    题目1: n个人参赛(n<=100000),每个人有一个权值··已知两个人权值绝对值之差小于等于K时,两个人都有可能赢,若大于则权值大的人赢···比赛为淘汰制,进行n-1轮·问最后可能赢的人有多 ...

  3. tomcat 启动慢解决(/dev/random)

    JRE默认使用 /dev/random作为随机数来源,当熵池大小不够的时候,random会很慢,造成随机数生成调用阻塞. 解决方案: 改用 /dev/urandom (1) tomcat的启动选项增加 ...

  4. 论文笔记:《OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks DeepLearning 》

    一.Abstract综述 训练出一个CNN可以同时实现分类,定位和检测..,三个任务共用同一个CNN网络,只是在pool5之后有所不同 二.分类 这里CNN的结构是对ALEXNET做了一些改进,具体的 ...

  5. js 一/二维数组排序

    JavaScript中数组排序方法 用到的最多的当然是封装好的sort()方法了 一:sort()方法怎么使用? sort方法并不像我们想的那么容易使用,不是单纯的arr.sort()就行了,需要我们 ...

  6. vue项目中使用vue-awesome

    公司在项目重构时,遇到图标问题,然后把vue-awesome.iconfont.iconMoon都试了一遍,虽然最终使用了iconMoon但是也要把这两个过程记录一下. github地址 1.首先安装 ...

  7. Codeforces 460D. Little Victor and Set

    D. Little Victor and Set time limit per test:1 second memory limit per test:256 megabytes input:stan ...

  8. [LeetCode] Longest Substring Without Repeating Characters最长无重复子串

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---3

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...

  10. Java发送邮件--web.xml配置,Java代码配置

    前言:我目前总结的使用java发送邮件的方式有两种,分别是在spring框架xml配置文件使用bean标签,另一种方法是把发送功能封装成一个对象,废话不多说上代码, 边看代码边讲解,希望对需要的人能有 ...