HTML5触摸事件

最新推荐文章于 2023-02-15 15:03:10 发布

Fighting_No1

最新推荐文章于 2023-02-15 15:03:10 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： html5 触摸屏手机 javascript

web前端专栏收录该内容

45 篇文章 3 订阅

订阅专栏

取材自：

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>

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

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

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

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

六、Jquery 兼容写法

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

<script>  
$(function(){  
    $("#box").mousedown(function(event){  
        console.log(event.offsetX, event.offsetY);  
        console.log(event.clientX, event.clientY);  
        console.log(event.pageX, event.pageY);  
        console.log(event.screenX, event.screenY);  

        /* firefox */  
        console.log(event.originalEvent.layerX, event.originalEvent.layerY);  
    });  
});  
</script>

Fighting_No1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5触摸事件

取材自：html5手机触屏touch事件介绍图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别HTML5触摸事件详解HTML5触摸事件包含：touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调...
复制链接

扫一扫

专栏目录