如何使用 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

MouseEvent当输入设备被触摸时，侦听器不会被触发，但TouchEvent侦听PointerEvent器会被触发。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>它们每个都有与 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    }}

Answer 2

尝试使用@contextmenu.prevent="func".&nbsp;当我按住手机上的某个元素时，这对我有用。但是，就像右键单击一样。