Как предотвратить событие @click при запуске @touchstart через alpine. js - PullRequest
Новая
       36

Как предотвратить событие @click при запуске @touchstart через alpine. js

0 голосов
/ 19 апреля 2020

Я использую alpine. js со следующим кодом: 

<a href="#home" @click="myFunction(event)"
   @touchstart.prevent="myFunction(event)"> 
  My Link
</a>
...
function myFunction(ev) {
  console.log(ev.type + ' -> myfunc');
}

Я ожидаю, что консоль будет выводить только: 

touchstart-> myfunc

Тем не менее, она по-прежнему вызывает событие щелчка и вывод: 

touchstart-> myfunc
click -> myfunc

Я также пытался @touchstart.stop, но безрезультатно. Есть какие-нибудь идеи относительно того, что происходит, или я делаю что-то не так?

Обновление: Изначально я тестировал с помощью Firefox инструментов разработчика. Однако, когда я попробовал на инструментах разработки Chromium, события касания / щелчка вели себя как ожидалось. Это означает, что это может быть ошибкой в ​​том, что Firefox dev tools обрабатывает события касания / нажатия.

1 Ответ

0 голосов
/ 30 апреля 2020

Что приходит на ум, так это то, что остановка распространения события касания не остановит срабатывание события щелчка.

Чтобы справиться с этим пользовательским пространством с помощью Alpine. js, вам, вероятно, нужно установить " isTouch "или эквивалентный флаг, и пока происходит касание, игнорируйте щелчки.

Например. 

<div x-data="{ isTouch: false }">
  <a href="#home" @click="!isTouch && myFunction($event)"
   @touchstart.prevent="isTouch = true; myFunction($event)"> 
    My Link
  </a>
</div>
...