是否可以将第一个 pageX 值存储在 touchstart 上？

发布于 2025-01-05 18:29:24 字数 623 浏览 1 评论 0原文

我想计算 touchstart 的初始值和 touchmove 的实际值之间的距离。

例如：

我触摸屏幕：startX = 100；然后，我在屏幕上移动手指：moveX = 150;

startX与moveX的距离为(moveX - startX) = 50；

代码更新：

function touch(event) {
var moveX = event.pageX;
var totalMoved = Math.abs(document.startX - moveX);
shipX = totalMoved;
consoleLog(totalMoved);
};

function touchStart(event) {
    touch(event.touches[0]);
    document.startX = event.pageX;
};

function touchMove(event) {
    event.preventDefault();
    touch(event.touches[0]);
}; 

function touchEnd(event) {
    touch(event.touches[0]);
    var totalMoved = 0;
};

原文

I want to calculate the distance between the initial value of the touchstart and the actual value on touchmove.

for exemple :

I touch the screen : startX = 100;
Then, I move my finger on the screen : moveX = 150;

The distance from startX and moveX is (moveX - startX) = 50;

CODE UPDATED :

function touch(event) {
var moveX = event.pageX;
var totalMoved = Math.abs(document.startX - moveX);
shipX = totalMoved;
consoleLog(totalMoved);
};

function touchStart(event) {
    touch(event.touches[0]);
    document.startX = event.pageX;
};

function touchMove(event) {
    event.preventDefault();
    touch(event.touches[0]);
}; 

function touchEnd(event) {
    touch(event.touches[0]);
    var totalMoved = 0;
};

分享到QQ

分享到微博

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

发布评论

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

冷清清 2025-01-12 18:29:24

是的，这是可能的。您只需将该值存储在 touchMove() 函数中可见的范围内即可。为了便于说明，我们可以通过污染全局作用域来解决这个问题：

function touchStart(event) {
    touch(event.touches[0]);
    window.startX = event.pageX;
};

function touchMove(event) {
    event.preventDefault();
    var moveX = event.pageX;
    var totalMoved = Math.abs(window.startX - moveX);
};

当然，有多种方法可以在不污染全局作用域的情况下做到这一点。例如，您可以使事件处理函数成为某个对象的成员，该对象将必要的状态作为成员变量保存。或者，touchStart() 处理程序可以创建一个封装 startX 变量的闭包，然后将其设置为 touchesMoved 处理程序。等等。

Yes, this is possible. You just need to store the value in a scope that will be visible in your touchMove() function. For the sake of illustration, we can solve this problem by polluting the global scope:

function touchStart(event) {
    touch(event.touches[0]);
    window.startX = event.pageX;
};

function touchMove(event) {
    event.preventDefault();
    var moveX = event.pageX;
    var totalMoved = Math.abs(window.startX - moveX);
};

Of course, there are various ways to do this without polluting the global scope. For instance, you could make your event handler functions be members of some object that holds the necessary state as member variables. Or the touchStart() handler could create a closure that encapsulates the startX variable and then set that to be the touchesMoved handler. And so on.

回复收藏 0 原文