Как получить положение/направление касания в javascript?

Цель

Я хочу получить положение касания соответственно направлению касания и в зависимости от движения исчезать или исчезать кнопка входа в систему (для целей тестирования я просто меняю фон в данный момент)

Проблема

Консоль выдает мне следующую ошибку:

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

Я также нашел это сообщение , но это не помогает в моем случае.

Здесь вы можете найти всю ветку

Я думаю, это простая ошибка javascript. Очевидно, что undefined ;) Может быть, кто-нибудь освободит меня?


javascript laravel touches
person leonp5    schedule 03.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы не должны использовать e.originalEvent в ванильном javascript. Это часть API событий jQuery.

Попробуйте: touchstart = e.touches[0].clientY и e.changedTouches[0].clientY

Это должно сработать.

person Shahstewart    schedule 03.04.2020

arrow_upward
0
arrow_downward

Вот как получить направление прокрутки;

    var prevScrollPos = 0;

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

Зарегистрированное в консоли значение может быть -ve и +ve, что означает направление, в котором прокручивается пользователь. (Я использовал el, вы можете заменить его на window)

person Akshay kn    schedule 13.05.2021