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

nqwrtyyt 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(176)

这只适用于移动设备，在桌面上也能正常工作，所以我将省略所有的样式和功能。
我有一个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>

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

- 方法**

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在我长按的时候没有被触发呢？
1.如何使用Vue（或JavaScript）定位移动设备上的长按？

JavaScript

来源：https://stackoverflow.com/questions/64727535/how-to-trigger-long-press-click-and-hold-on-mobile-devices-with-vue-javascri

2条答案

按热度按时间

ogsagwnx1#

编辑日期：2022年12月

当触摸输入设备时，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>

原件：

您需要使用TouchEvent API或PointerEvent API。
两者的浏览器兼容性都很好：

它们都具有与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
    }
}

赞(0）回复(0）举报 2023-01-01

v09wglhw2#

尝试使用@contextmenu.prevent="func"。当我按住phone中的一个元素时，它对我很有效。但是，它的工作原理就像右键单击一样。

赞(0）回复(0）举报 2023-01-01

我来回答

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

2条答案

相关问题

热门标签

最新问答