js的touch事件

来源：互联网发布：g900 支持 mac 编辑：程序博客网时间：2024/05/16 07:29

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

下面是实现的一个在ios上的touch例子，效果是一个红方块跟随手指移动：

var canvas = document.getElementById('canvas'),    spirit, startX, startY;function touchStart(event) {    event.preventDefault();    if (spirit || !event.touches.length) return;    var touch = event.touches[0];    startX = touch.pageX;    startY = touch.pageY;    spirit = document.createElement('div');    spirit.className = 'spirit';    spirit.style.left = startX + 'px';    spirit.style.top = startY + 'px';    canvas.appendChild(spirit);}canvas.addEventListener('touchstart', touchStart, false);function touchMove(event) {    event.preventDefault();    if (!spirit || !event.touches.length) return;    var touch = event.touches[0],        x = touch.pageX - startX,        y = touch.pageY -  startY;    spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';}canvas.addEventListener('touchmove', touchMove, false);function touchEnd(event) {    if(!spirit) return;    canvas.removeChild(spirit);    spirit = null;}canvas.addEventListener('touchend', touchEnd, false);

页面上：

<!DOCTYPE html><html style="width: 100%;height: 100%;"><head>    <title></title>    <!--启用viewport-->    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <style type="text/css">    .spirit {        /* 方块的class名称*/        position: absolute;        width: 50px;        height: 50px;        background-color: red;    }    </style></head><body style="height: 100%;margin:0;padding:0">    <div id="canvas" style="position: relative;width:100%;height: 100%;"></div></body></html>

阅读全文

0 0