如何用Vue在移動設備上觸發長按（點擊並按住） / JavaScript

Question

這僅適用於移動設備。 它在桌面上按預期工作，因此我將省略所有這些 styles 和功能。

我有一個這樣的 Vue-component：

模板

<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. 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

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

Answer 2

嘗試使用@contextmenu.prevent="func" 。 當我按住電話中的某個元素時，這對我有用。 但是，就像右鍵單擊一樣。