這僅適用于移動設備。它在桌面上按預期工作，因此我將省略所有這些樣式和功能。我有一個像這樣的 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。那么兩個問題：我明白為什么沒有被觸發，因為它是和@click的組合。但為什么當我長按時沒有觸發？@mousedown@mouseup@mousedown如何使用 Vue（或 JavaScript）在移動設備上定位長按？
2 回答
慕雪6442864
TA貢獻1812條經驗 獲得超5個贊
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
? ? }
}
