HTML5触摸事件

朴灿烈づ我的快乐病毒、 2022-06-07 00:49 267阅读 0赞

取材自：

*  [html5手机触屏touch事件介绍][html5_touch]
 *  [图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别][Js event_offsetX_ clientX_ pageX_ screenX_ layerX_ x]

## HTML5触摸事件详解 ##

**HTML5触摸事件包含：**

*  **touchstart事件**：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
 *  **touchmove事件**：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
 *  **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：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。

var obj = document.getElementByIdx_x('id');
    obj.addEventListener('touchmove', function(event) { 
         // 如果这个元素的位置内只有一个手指的话
        if (event.targetTouches.length == 1) {
    　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 
            var touch = event.targetTouches[0];
            // 把元素放在手指所在的位置
            obj.style.left = touch.pageX-50 + 'px';
            obj.style.top = touch.pageY-50 + 'px';
            }
    }, false);

## JS的event对象的offsetX, clientX, pageX, screenX, layerX,x区别 ##

### 一、测试代码如下： ###

<!DOCTYPE HTML>  
    <html lang="zh-cn">  
    <head>  
    <meta charset="utf-8" />  
    <title>Javascript</title>  
    <style> body{ margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto} .main{ width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;} .box{ position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;} </style>  
    </head>  
    
    <body style="height:1600px;">  
    <div class="main">  
        <div class="box" id="box"></div>  
    </div>  
    
    <script> var oBox = document.getElementById('box'); window.onload = function(){ oBox.onmousedown = function(ev){ ev = ev || window.event; console.log(ev.offsetX, ev.offsetY); console.log(ev.clientX, ev.clientY); console.log(ev.pageX, ev.pageY); console.log(ev.screenX, ev.screenY); console.log(ev.layerX, ev.layerY); console.log(ev.x, ev.y); } } </script>  
    </body>  
    </html>

### 二、不同浏览器对这些属性的支持： ###

![Center][]

### 三、图解 event.offsetX，event.clientX，event.pageX，event.screenX属性 ###

![Center 1][]

### 四、图解 event.layerX，event.layerY 属性 ###

![Center 2][]

### 五、图解 event.x，event.y 属性 ###

![Center 3][]

### 六、Jquery 兼容写法 ###

Jquery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

[html5_touch]: http://www.jb51.net/article/85866.htm
[Js event_offsetX_ clientX_ pageX_ screenX_ layerX_ x]: http://blog.csdn.net/lzding/article/details/45437707
[Center]: /images/20220607/1d951dc9818a4bf891fc64201dbbbdcc.png
[Center 1]: /images/20220607/bc527781176e4f8dbf7f2b5ff239f387.png
[Center 2]: /images/20220607/bed2e6b126ae48a5af97213b1c0b38c2.png
[Center 3]: /images/20220607/a30d9a713245490f8382df05d9b2a785.png