手机touch事件及参数【转】(自己懒得写了,找了一篇摘过来)

2024-07-28 作者:

⼿机touch事件及参数【转】（⾃⼰懒得写了，找了⼀篇摘过

来）

前⾔

⼀个触屏⽹站到底和传统的pc端⽹站有什么区别呢，交互⽅式的改变⾸当其冲。例如我们常⽤的click事件，在触屏设备下是如此⽆⼒。⼿机上的⼤部分交互都是通过touch来实现的，于是，对于触屏的交互式⽹站，触摸事件是相当重要的。

Apple在iOS 2.0中引⼊了，Android正迎头赶上这⼀事实标准，缩⼩差距。最近⼀个W3C⼯作组正合⼒制定这⼀。规范

这⾥我们介绍⼏种普及得⽐较好的触摸事件，你可以在绝⼤多数现代浏览器中来测试这⼀事件（必须是触屏设备哦）：touchstart：触摸开始的时候触发

touchmove：⼿指在屏幕上滑动的时候触发touchend：触摸结束的时候触发

⽽每个触摸事件都包括了三个触摸列表，每个列表⾥包含了对应的⼀系列触摸点（⽤来实现多点触控）：touches：当前位于屏幕上的所有⼿指的列表。targetTouches：位于当前DOM元素上⼿指的列表。changedTouches：涉及当前事件⼿指的列表。每个触摸点由包含了如下触摸信息（常⽤）：

identifier：⼀个数值，唯⼀标识触摸会话（touch session）中的当前⼿指。⼀般为从0开始的流⽔号（android4.1，uc）target：DOM元素，是动作所针对的⽬标。

pageX/pageX/clientX/clientY/screenX/screenY：⼀个数值，动作在屏幕上发⽣的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕

为基准）。　

radiusX/radiusY/rotationAngle：画出⼤约相当于⼿指形状的椭圆形，分别为椭圆形的两个半径和旋转⾓度。初步测试浏览器不⽀持，好在功能

不常⽤，欢迎⼤家反馈。

有了这些信息，我们就可以依据这些事件信息为⽤户提供不同的反馈了。下⾯，我将为⼤家展⽰⼀个⼩demo，⽤touchmove实现的单指拖动:

/*单指拖动*/

var obj = mentById('id');

ntListener('touchmove', function(event) { // 如果这个元素的位置内只有⼀个⼿指的话 if ( == 1) {

　　　　 tDefault();// 阻⽌浏览器默认事件，重要

var touch = Touches[0]; // 把元素放在⼿指所在的位置

= -50 + 'px'; = -50 + 'px'; }

}, false);

关于a标签四个伪类在触屏设备中的⼩技巧：

我们都知道a标签的四个伪类link，visited，active，hover是专为click事件设计的，所以在触屏⽹站中尽量不要使⽤它们。经测试⼤部分也是不可⽤的。但是这⾥有⼀个关于hover的⼩技巧，当你点击过⼀个按钮之后，这个按钮就会⼀直处于hover的状态，此时你基于这个伪类所设置的css也是起作⽤的，直到你⽤⼿指点击另外⼀个按钮，hover状态就会转移到另⼀个按钮。利⽤这⼀点，我们可以做出⼀些⼩效果。此技巧在⼤多数浏览器中还是可⽤的。