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

Question

这仅适用于移动设备。它在桌面上按预期工作，因此我将省略所有这些样式和功能。

我有一个像这样的 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>

所有的 div、按钮、锚点和视频都堆叠在一起，使用display: block和position: absolute; width: 100%; etc. etc. etc.

方法

  playVideo(){
    console.log( 'Im playing!!' );
    if( this.player ){
      if( this.player.paused ){
        this.player.play()
      }
    }
  }

如果我点击它，它就会按预期工作：

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

但如果我单击并按住，则 或@click都不会@mousedown被触发。这都在：

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

---

那么两个问题：

1. 我明白为什么没有被触发，因为它是和@click的组合。但为什么当我长按时没有触发？@mousedown@mouseup@mousedown
2. 如何使用 Vue（或 JavaScript）在移动设备上定位长按？

Answer 1

编辑：2022 年 12 月

PointerEvent是现在推荐的方式，因为它涵盖了所有设备：

<button
  v-if="!videoIsPlaying"
  @pointerdown="playVideo()"
></button>

长按阅读：

<template>
  <button
    @pointerdown="isHolding = true"
    @pointerup="isHolding = false"
  ></button>
</template>

<script setup>
import { ref } from 'vue';

const isHolding = ref(false);
</script>

原来的：

您需要使用TouchEvent API或PointerEvent API。

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

• https://caniuse.com/mdn-api_touchevent
• https://caniuse.com/mdn-api_pointerevent

它们每个都有与 MouseEvent API 相似的事件，即touchstart= mousedown。

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

因此，正如您对 Vue 所猜测的那样，您可以使用@touchstart：

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

如果您想将其确定为长按，则必须在 上存储一个值touchstart并在 上更改它touchend：

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