通过alpine.js触发@touchstart时如何防止@click事件

Question

我正在使用 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 的开发工具时，touch/click 事件的行为符合预期。这意味着它可能是 Firefox 开发工具处理 touch/click 事件的方式中的错误。

Answer 1

我想到的是，停止传播触摸事件不会停止触发点击事件。

要使用 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>

通过alpine.js触发@touchstart时如何防止@click事件

How do I prevent @click event when triggering @touchstart via alpine.js

touch-event

alpine.js