当前位置：文江博客话题详情

Zepto touch WebApp

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

发布于 2022-08-31 20:11:37 字数 40 浏览 20 评论 0

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

假装爱人 2022-09-07 20:11:37

举个例子：

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

伏妖词 2022-09-07 20:11:37

正好也遇到这个问题。

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文