就是我按下去，然后向下移动，怎么获取我松开手指时这一段的距离？

zepto的swipe事件或原生touch事件，如何获取移动的距离~

2 个回答

得票最新

FantasyShao

819347

发布于
2015-01-09

✓ 已被采纳

举个例子：

HTML:

html<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style media="screen">
        body {
            margin: 0;
        }
        .test {
            background-color: blue;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>

JavaScript

js    (function () {
        var el = document.querySelector('.test');
        var startPosition, endPosition, deltaX, deltaY, moveLength;

        el.addEventListener('touchstart', function (e) {
            var touch = e.touches[0];
            startPosition = {
                x: touch.pageX,
                y: touch.pageY
            }
        });

        el.addEventListener('touchmove', function (e) {
            var touch = e.touches[0];
            endPosition = {
                x: touch.pageX,
                y: touch.pageY
            }

            deltaX = endPosition.x - startPosition.x;
            deltaY = endPosition.y - startPosition.y;
            moveLength = Math.sqrt(Math.pow(Math.abs(deltaX), 2) + Math.pow(Math.abs(deltaY), 2));
            console.log(moveLength);
        });
    })();

console.log出来的moveLength就是你要得到的距离。

可以参考Zepto的touch源码：https://github.com/madrobby/zepto/blob/master/src%2Ftouch.js