iphone、ipod Touch、ipad触屏时的js事件

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

时间: 2024-10-14 18:09:03

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

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

丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如iphone.ipod Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel事件,分别对应了触屏开始.拖拽及完成

移动端触屏滑动,JS事件

先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan

iPad iPhone iPod touch

Price Display Chip iSight Camera FaceTime Camera RAM JD Price iPad Air 3588 2048X1536 A7 5MP 1.2MP 1024 3388 iPad R 2888 2048X1536 A6X 5MP 1.2MP 1024 2888 iPad mini R 2888 2048X1536 A7 5MP 1.2MP 1024 2758 iPad mini 2098 1024X768 A5 5MP 1.2MP 512 1998

The bundle does not contain an app icon for iPhone / iPod Touch of exactly '57x57' pixels, in .png format for iOS versions < 7.0”

用Xcode6 或 Application Loader发布时总是提示“Missing required icon file. The bundle does not contain an app icon for iPhone / iPod Touch of exactly '57x57' pixels, in .png format for iOS versions < 7.0” 修改 deployment info 中 target The bundle does not contain

The bundle does not contain an app icon for iPhone / iPod Touch of exactly &amp;#39;120x120&amp;#39; pixels, in .pn

xcode 6.3 载发生时的应用'Missing recommended icon file - The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format'. 在plist文件里 icon files加入 解决方式 : watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFyb25fYmxvZ3M

The bundle does not contain an app icon for iPhone / iPod Touch of exactly &#39;120x120&#39; pixels, in .pn

xcode 6.3 上传应用时会出现'Missing recommended icon file - The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format'. 在plist文件中 icon files添加 解决方案 : 解决链接 http://stackoverflow.com/questions/18736954/missing-re

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发

多点触屏浏览器的js开发

这篇文章讲到了很多关于手机触摸事件的知识,比如touchstart,touchmove,touchend,对于获取屏幕的左右跟网页版的也是不一样的哦.我以前也比较少接触这方面的知识,最近做一个项目才发现原来用event.pageX是获取不了当前的位置(在手机上).需要用到var touch = event.originalEvent.touches[0]; 然后touch.pageX才可以在手机里面获取.我今后会分享多一些这方面的内容,关于移动开发其实也挺有趣的. 前言诸如智能手机和平板电脑一类

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

在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常明显,用我的iphone5执行下段测试代码,平均延迟在370毫秒!结果非常惊人,所以在移动端必须得用tap事件了,click不仅仅是慢的问题,而且会严重影响css3动画!没错,这绝对是真的,我做的单页应用,用click事件执行的,点击后css3切换动画,经常会出现动画被省略掉直接到最后一个keyfr