整理HTML5移动端开发的常用触摸事

1、整理html5移动端开发的常用触摸事html5中新添加了无数大事，但是因为他们的兼容问题不是很抱负，应用实战性不是太强，所以在这里基本省略，咱们只共享应用广泛兼容不错的大事，日后随着兼容状况提升以后再间续添加共享。今日为大家介绍的大事主要是触摸大事：touchstart、touchmove和touchend。一开头触摸大事touchstart、touchmove和touchend是ios版safari扫瞄器为了向开发人员传达一些信息新添加的大事。由于ios设备既没有鼠标也没有键盘，所以在为移动safari扫瞄器开发交互性网页的时候，pc端的鼠标和键盘大事是不够用的。在iphone 3gs发布的

2、时候，其自带的移动safari扫瞄器就提供了一些与触摸(touch)操作相关的新大事。随后，android上的扫瞄器也实现了相同的大事。触摸大事(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候动身。下面详细解释：touchstart大事：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove大事：当手指在屏幕上滑动的时候延续地触发。在这个大事发生期间，调用preventdefault()大事可以阻挡滚动。touchend大事：当手指从屏幕上离开的时候触发。touchcancel大事：当系统停止跟踪触摸的时候触发。关于这个大事确实

3、切动身时光，文档中并没有详细解释，咱们只能去猜想了。上面的这些大事都会冒泡，也都可以取消。虽然这些触摸大事没有在dom规范中定义，但是它们却是以兼容dom的方式实现的。所以，每个触摸大事的event对象都提供了在鼠标实践中频繁的属性：bubbles(起泡大事的类型)、cancelable(是否用 preventdefault() 办法可以取消与大事关联的默认动作)、clientx(返回当大事被触发时，鼠标指针的水平坐标)、clienty(返回当大事触发时，鼠标指针的垂直坐标)、screenx(当某个大事被触发时，鼠标指针的水平坐标)和screeny(返回当某个大事被触发时，鼠标指针的垂直坐标)

4、。除了频繁的dom属性，触摸大事还包含下面三个用于跟踪触摸的属性。touches：表示当前跟踪的触摸操作的touch对象的数组。targettouches：特定于大事目标的touch对象的数组。changetouches：表示自上次触摸以来发生了什么转变的touch对象的数组。 每个touch对象包含的属性如下。clientx：触摸目标在视口中的x坐标。clienty：触摸目标在视口中的y坐标。identifier：标识触摸的唯一id。pagex：触摸目标在页面中的x坐标。pagey：触摸目标在页面中的y坐标。screenx：触摸目标在屏幕中的x坐标。screeny：触摸目标在屏幕中的y坐标。

5、target：触目的dom节点目标。每个触摸点由包含了如下触摸信息（常用）：identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。普通为从0开头的流水号（android4.1，uc）target：dom元素，是动作所针对的目标。pagex/pagex/clientx/clienty/screenx/screeny：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。radiusx/radiusy/rotationangle：画出大约相当于手指外形的椭圆形，分离为椭圆形的两个半径和旋转角度。初步测

6、试扫瞄器不支持，好在功能不常用，欢迎大家反馈。javascript操作小例子：javascript code复制内容到剪贴板var obj = document.getelementbyidx_x(&39;id&39;);obj.addeventlistener(&39;touchmove&39;, function(event) / 假如这个元素的位置内惟独一个手指的话 if (event.targettouches.length = 1) event.preventdefault();/ 阻挡扫瞄器默认大事，重要 var touch = event.targettouches0; / 把元素放在手指所在的位置 obj.style.left = touch.pagex-