js的touch事件

相应的事件有：

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>

 

posted @ 2017-03-07 17:03  小猪ab  阅读(1300)  评论(0)  编辑  收藏  举报