利用vue实现长按事件
监听原生事件实现长按
在Vue中可以通过监听touchstart和touchend或mousedown和mouseup原生事件来实现长按功能。创建一个计时器，当按下时间超过设定阈值时触发长按操作。
<template>
<button
@mousedown="startPress"
@mouseup="endPress"
@touchstart="startPress"
@touchend="endPress"
>
长按我
</button>
</template>
<script>
export default {
data() {
return {
pressTimer: null,
pressDuration: 1000 // 1秒长按阈值
}
},
methods: {
startPress(e) {
this.pressTimer = setTimeout(() => {
this.handleLongPress(e)
}, this.pressDuration)
},
endPress() {
clearTimeout(this.pressTimer)
},
handleLongPress(e) {
console.log('长按事件触发', e)
}
}
}
</script>使用自定义指令封装
将长按逻辑封装为可复用的自定义指令，使用时只需在元素上添加v-longpress指令。
// 全局注册指令
Vue.directive('longpress', {
bind(el, binding) {
let pressTimer = null
const handler = binding.value
const duration = binding.arg || 1000
const start = (e) => {
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler(e)
}, duration)
}
}
const cancel = () => {
if (pressTimer !== null) {
clearTimeout(pressTimer)
pressTimer = null
}
}
el.addEventListener('mousedown', start)
el.addEventListener('touchstart', start)
el.addEventListener('mouseup', cancel)
el.addEventListener('touchend', cancel)
el.addEventListener('mouseleave', cancel)
}
})
// 使用方式
<button v-longpress:1500="longPressHandler">长按1.5秒</button>处理移动端与PC端兼容
针对不同设备需要处理事件差异，防止同时触发点击和长按事件。可以添加标志位判断是否已触发长按。
methods: {
startPress(e) {
this.isLongPress = false
this.pressTimer = setTimeout(() => {
this.isLongPress = true
this.handleLongPress(e)
}, this.pressDuration)
},
endPress() {
clearTimeout(this.pressTimer)
if (!this.isLongPress) {
this.handleClick()
}
},
handleClick() {
console.log('普通点击事件')
}
}添加触觉反馈（移动端）
在移动设备上触发长按时，可以通过振动API提供触觉反馈，增强用户体验。
handleLongPress(e) {
if ('vibrate' in navigator) {
navigator.vibrate(50) // 振动50毫秒
}
console.log('长按事件触发')
}防止长按默认行为
某些浏览器在长按时会触发默认菜单，需要阻止这些默认行为以获得一致体验。
startPress(e) {
e.preventDefault()
// 剩余长按逻辑
}以上方法可根据实际需求组合使用，自定义指令方式更适合在多个组件中复用长按逻辑，而原生事件监听则适合简单场景。移动端开发时务必同时处理touch和mouse事件以确保兼容性。
