web前端中的Touch事件实例

Posted 2020-07-23 小蒋不素小蒋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端中的Touch事件实例相关的知识，希望对你有一定的参考价值。


一、触摸事件（TouchEvent）：

　　事件：

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

　　事件属性：

e.touches:当前屏幕上所有触摸点的集合列表
e.targetTouches: 绑定事件的那个结点上的触摸点的集合列表
e.changedTouches: 触发事件时改变的触摸点的集合

　　事件属性返回数组的每个Touch对象包含下列属性：

clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标。


例1、单个手指touch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <title>single figure touch test</title>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0
        }

        #canvas {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .spirit { /* 方块的class名称*/
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>

<div id="canvas"></div>

<script>

    // define global variable
    var canvas = document.getElementById("canvas"),
            spirit, startX, startY;

    // touch start listener
    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";
        //注意：一定要加‘px’单位
        spirit.style.left = startX + \'px\';
        spirit.style.top = startY + \'px\';
        canvas.appendChild(spirit);
    }
    // add touch start listener
    canvas.addEventListener("touchstart", touchStart, false);

    // touch move listener
    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)\';
    }
    // touch move listener
    canvas.addEventListener("touchmove", touchMove, false);

    // touch end listener
    function touchEnd(event) {
        if (!spirit) return;
        canvas.removeChild(spirit);
        spirit = null;
    }
    // touch end listener
    canvas.addEventListener("touchend", touchEnd, false);
</script>
</body>
</html>

例2、多个手指touch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <title>multi figure touch test</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .spirit {
            position: absolute;
            width: 70px;
            height: 70px;
        }
    </style>
</head>
<body>
<div id="canvas"></div>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas"),
            stacks = [{
                color: "red"
            }, {
                color: "blue"
            }, {
                color: "green"
            }, {
                color: "black"
            }, {
                color: "yellow"
            }, {
                color: "orange"
            }];

    function getEmptyStack() {
        var i = 0, s, l = stacks.length;
        for (; i < l; i++) {
            s = stacks[i];
            if (!s.touchId)
                return s;
        }
        return null;
    }

    function getStackByTouchId(touchId) {
        var i = 0, s, l = stacks.length;
        for (; i < l; i++) {
            s = stacks[i];
            if (s.touchId == touchId)
                return s;
        }
        return null;
    }

    function touchStart(e) {
        e.preventDefault();
        var touches = e.changedTouches,
                i = 0, l = touches.length, touch, stack;
        for (; i < l; i++) {
            touch = touches[i];
            stack = getStackByTouchId(touch.identifier);
            if (stack) return;
            stack = getEmptyStack();
            if (stack) {
                stack.touchId = touch.identifier;
                stack.spirit = document.createElement("div");
                stack.spirit.className = "spirit";
                stack.startX = touch.pageX;
                stack.startY = touch.pageY;
                stack.spirit.style.left = touch.pageX + "px";
                stack.spirit.style.top = touch.pageY + "px";
                stack.spirit.style.backgroundColor = stack.color;
                canvas.appendChild(stack.spirit);
            } else { // stack list is full
                return;
            }
        }
    }

    function touchMove(e) {
        e.preventDefault();
        var touches = e.targetTouches,
                i = 0, l = touches.length, touch, stack;
        for (; i < l; i++) {
            touch = touches[i];
            stack = getStackByTouchId(touch.identifier);
            if (stack) {
                var x = touch.pageX - stack.startX,
                        y = touch.pageY - stack.startY,
                        spirit = stack.spirit;
                spirit.style.webkitTransform = \'translate(\' + x + \'px, \' + y + \'px)\';
            }
        }
    }

    function touchEnd(e) {
        var touches = e.changedTouches,
                i = 0, l = touches.length, touch, stack;
        for (; i < l; i++) {
            touch = touches[i];
            stack = getStackByTouchId(touch.identifier);
            if (stack) {
                stack.touchId = null;
                canvas.removeChild(stack.spirit);
                stack.spirit = null;
            }
        }
    }

    //当触控被中断
    function touchCancel(e) {
        var touches = e.changedTouches,
                i = 0, l = touches.length, touch, stack;
        for (; i < l; i++) {
            touch = touches[i];
            stack = getStackByTouchId(touch.identifier);
            if (stack) {
                stack.touchId = null;
                canvas.removeChild(stack.spirit);
                stack.spirit = null;
            }
        }
    }

    canvas.addEventListener("touchstart", touchStart, false);
    canvas.addEventListener("touchmove", touchMove, false);
    canvas.addEventListener("touchend", touchEnd, false);
    canvas.addEventListener("touchCancel", touchCancel, false);
</script>
</html>

例3、单个手指放下并滑动

　　1、当手指滑动时，整个page会跟着移动，除非preventDefault了body的touchmove。以上是关于web前端中的Touch事件实例的主要内容，如果未能解决你的问题，请参考以下文章

移动web touch事件

移动web——touch事件的应用

移动端WEB开发，click,touch,tap事件浅析

移动web——touch事件

移动端 Touch 事件

web移动端touch事件