如何在javascript中获取触摸位置/方向？答案

【问题标题】：How to get touch position/direction in javascript?如何在javascript中获取触摸位置/方向？
【发布时间】：2020-07-15 22:30:30
【问题描述】：

目标

我想分别获取触摸位置和 touchmove 的方向，并根据移动淡入或淡出登录按钮（为了测试目的，我现在只是更改背景）

问题

控制台给我以下错误：

Cannot read property 'changedTouches' of undefined at HTMLDocument.checkScrollPosition

分别

 Cannot read property 'touches' of undefined at HTMLDocument.checkScrollPosition

我正在使用 Laravel 和纯 JS。

这就是我实际尝试的功能（在 ToggleLogin.js 内部）：

window.onload = function FadeLoginButton() {
    const width = window.innerWidth;
    if (width < 850) {
        document.addEventListener("touchstart", startTouch);
        document.addEventListener("touchmove", checkScrollPosition);
    }
};

let touchstart;

function startTouch(e) {
    touchstart = e.originalEvent.touches[0].clientY;
}


function checkScrollPosition(e) {
    const touchend = e.originalEvent.changedTouches[0].clientY;

    const button = document.getElementById("mobile-login-btn");
    if (touchstart > touchend) {
        button.style.background = "green";
    } else {
        button.style.background = "blue";
    }
}

或变体：

window.onload = function FadeLoginButton() {
    const width = window.innerWidth;
    if (width < 850) {
        document.addEventListener("touchstart", checkScrollPosition);
        document.addEventListener("touchmove", checkScrollPosition);
    }
};

function checkScrollPosition(e) {
    const touchstart = e.originalEvent.touches[0].clientY;
    const touchend = e.originalEvent.changedTouches[0].clientY;

    const button = document.getElementById("mobile-login-btn");
    if (touchstart > touchend) {
        button.style.background = "green";
    } else {
        button.style.background = "blue";
    }
}

这就是刀片，函数被调用的地方：

<button class="floating-btn" id="mobile-login-btn" onClick="ToggleMobileLogin()">Login</button>
<div class=login-modal id="login-modal">
  <form class="modal-content">
    <input type="checkbox" class="close-button" onClick="ToggleMobileLogin()" />
    <a class="close-cross"></a>
    <input class="basic-input" placeholder="Name" autofocus />
    <input class="basic-input" placeholder="Passwort" />
    <button class="basic-btn">Anmelden</button>
  </form>
</div>


@push('scripts')

<script src="{{ asset('js/components/ToggleLogin.js')}}"></script>

@endpush

一整天都在尝试不同的方法。受到来自 stackoverflow 的建议的启发：

Link1

Link2

我也发现了这个post，但这对我的情况没有帮助。

在这里你可以找到whole branch

我猜，这是一个简单的 javascript 错误。显然是未定义的；）也许有人可以释放我？

【问题讨论】：

标签： javascript laravel touches

【解决方案1】：

您不应该在原版 javascript 中使用 e.originalEvent。这是 jQuery 事件 API 的一部分。

尝试： touchstart = e.touches[0].clientY 和 e.changedTouches[0].clientY

应该可以的。

【讨论】：

【解决方案2】：

这里是获取滚动方向的方法；

    var prevScrollPos = 0;

    el.ontouchmove = function(ev) {
        console.log(prevScrollPos - ev.changedTouches[0].clientY);
        prevScrollPos = ev.changedTouches[0].clientY;
    };

控制台记录的值可以是 -ve 和 +ve，表示用户滚动的方向。（我用的是el，你可以换成window）

【讨论】：