时间戳

首页 > 解决方案 > 如何使用 Vue / JavaScript 在移动设备上触发长按（单击并按住）

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

所有的 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触发。这两者都在：

所以两个问题：

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

标签： javascriptvue.js

解决方案

您需要使用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
    }
}

推荐阅读