如何使用 Vue / JavaScript 在移動設(shè)備上觸發(fā)長按(點(diǎn)擊并按?。?/h1>
2 回答

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個贊
MouseEvent當(dāng)輸入設(shè)備被觸摸時,偵聽器不會被觸發(fā),但TouchEvent偵聽PointerEvent器會被觸發(fā)。
PointerEvent是現(xiàn)在推薦的方式,因?yàn)樗w了所有輸入設(shè)備,包括鼠標(biāo)和觸摸:
<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
。
我個人發(fā)現(xiàn) TouchEvents 比 PointerEvents 更好,但是,您可能需要進(jìn)行一些測試才能確定哪種最適合您的情況。
因此,正如您對 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
? ? }
}

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個贊
嘗試使用@contextmenu.prevent="func"
. 當(dāng)我按住手機(jī)上的某個元素時,這對我有用。但是,就像右鍵單擊一樣。
添加回答
舉報