如何使用Vue/JavaScript在移动设备上触发长按（点击并按住）

这仅适用于移动设备。它可以在桌面上正常工作，所以我将省略所有这些样式和功能

我有这样一个Vue组件：

模板

<div class="container">

  <div class="invisible-overlay-styles">
    <button
      v-if="! videoIsPlaying"
      @click="playVideo()"
      @mousedown="playVideo()"
    >
    </button>

    <a
      v-if="videoIsPlaying"
    >
    </a>
  </div> <!-- invisible-overlay-styles -->

  <video ... /> 

</div>

如果我单击它，它的工作原理如下：

• 第一次单击时，视频将播放
• 第二次单击时，将单击该链接

但如果单击并按住，则不会触发

@click

或

@mousedown

。这两方面都是：

• 三星安卓设备上的Chrome
• 在我的iPhone 7上的Safari上
• 在我的Mac上的iOS模拟器中。 ... 我已经检查过了，当我点击并按住（长按）时，没有出现console.log

---

所以有两个问题：

我明白为什么没有触发

@click

，因为这是

@mousedown

和

@mouseup

的组合。但是为什么当我长按时，

@mousedown

没有被触发呢

如何使用Vue（或JavaScript）在移动设备上实现长按目标

---

您需要使用或

两者的浏览器兼容性都很好：

它们都具有与MouseEvent API类似的事件，即

touchstart

=

mousedown

我个人发现TouchEvents比PointerEvents更好，但是，您可能需要进行一些测试，以确定哪一个最适合您

---

因此，正如您可以通过Vue猜测的那样，您可以使用

@touchstart

：

<button
    v-if="!videoIsPlaying"
    @click="playVideo()"
    @mousedown="playVideo()"
    @touchstart="playVideo()"
/>

---

您需要使用触摸事件，例如

touchstart

和

touchsend

。我刚才还玩了一些。问题是，如果我单击并拖动（滚动），初始单击的位置是该元素，则会触发

@touchstart

。有没有办法忽略这些？这取决于您的用例。如果你有条件，你可以

<button
    v-if="!videoIsPlaying"
    @click="playVideo()"
    @mousedown="playVideo()"
    @touchstart="playVideo()"
/>

<button
    @touchstart="touching = true"
    @touchend="touching = false"
/>
...
data() {
    return {
        touching: false
    }
}