JS - 移动设备终端的touch事件

移动设备的大部分交互都是通过触摸touch来实现的,是因为移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互。对于触屏的交互式网站、游戏,触摸事件是相当重要的。Apple在IOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

简单介绍一下IOS上的浏览器(主要Safari)所支持的多触式事件模型,然后将触控(Touch)这种简单的动作升级为手势(Gestrue)。

IOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在IOS上会有半秒左右的延迟,原因是IOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以,在IOS上,应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级 的Gesture事件,能让你的网页交互起来像native应用一样。

Touch事件是在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。

Gesture事件则是对touch事件的更高级的封装,主要处理手指slide、rotate、scale等动作。

1、跨移动设备(触屏)常用touch处理事件:

touchstart:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend:当手指从屏幕上拿起的时候触发。
touchcancel:当系统停止(取消)跟踪touch触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明(不详)。

上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)等。

2、每个触摸事件都包括了三个触摸列表(即用于跟踪触摸的属性),每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的一个列表(表示当前跟踪的触摸操作的touch对象的数组)
targetTouches:位于当前DOM元素上的手指的一个列表(特定于事件目标的Touch对象的数组)
changeTouches:涉及当前事件的手指的一个列表(表示自上次触摸以来发生了什么改变的Touch对象的数组)

3、每个触摸点由包含了如下触摸信息(常用重要属性):

通过touch event handler的event对象取到(一般是通过event.changedTouches属性)。
--- pageX/pageY/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离>相对页面,client不包含滚动距离>相对视口>>触摸点相对于浏览器窗口viewport的位置 ,screen以屏幕为基准>相对屏幕)。 
--- target:触目的DOM节点目标。(DOM元素,是动作所针对的目标)
--- identifier:标识触摸的唯一ID。(唯一标识触摸会话(touch session)中的当前手指)
--- radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。(未测试)

最后,来看下几个例子:

demo1:

demo2:

demo3:

转自:

html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove

WEB前端开发(www.css119.com)–移动互联网终端的touch事件,touchstart, touchend, touchmove

移动端html touch事件

时间: 2024-10-06 01:36:37

JS - 移动设备终端的touch事件的相关文章

转载–移动互联网终端的touch事件,touchstart, touchend, touchmove

转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端开发w3cschool手册 本文链接地址: WEB前端开发(www.css119.com)–移动互联网终端的touch事件,touchstart, touchend, touchmove 诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitiv

移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章

转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端开发w3cschool手册 本文链接地址: WEB前端开发(www.css119.com)–移动互联网终端的touch事件,touchstart, touchend, touchmove 诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitiv

JS判断设备终端(PC,iPad,iPhone,android,winPhone)和浏览器

var ua = navigator.userAgent; var browser = {}, weixin = ua.match(/MicroMessenger\/([^\s]+)/i), webkit = ua.match(/WebKit\/([\d.]+)/i), android = ua.match(/(Android)\s+([\d.]+)/i), ipad = ua.match(/(iPad).*OS\s([\d_]+)/i), ipod = ua.match(/(iPod).*OS

移动互联网终端的touch事件,touchstart, touchend, touchmove

如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,web开发者需要一种方法来处理这些事件.例如,几乎所 有的快节奏游戏都需要玩家一次按下多个按钮,这种方式,在触摸屏情况下,意味着多点触摸.

移动互联网终端的touch事件判断方向

var pressX = 0, pressY = 0; document.body.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (Math.abs(spanX) > Math.abs(spanY)) { //水平方向 if (spanX > 0) { direct = "right";//向右 //do right function } else { direct = &q

iPhone, Android等设备上的Touch和Gesture

现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Dojo 1.7中,新的touch API可以帮助您简化这一步骤. 本文是Touching and Gesturing on the iPhone的更新版,该文最早发布于2008年 引言在我们讨论Dojo 1.7中那些帮助创建可触摸界面的新功能之前,先来了解下底层的技术.概念.Apple在发布iPhon

touch事件调研-四个方向的滑动效果demo示例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移动端触摸滑动</title> <meta name="viewport" content="target-densitydpi=320,width=

JS的Touch事件们

iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如iphone.ipod Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 当按下手指时,触发ontou

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事件,分别对应了触屏开始.拖拽及完成