在处理移动端上的点击事件时，由于触摸屏设备的特性，click 事件会有 300ms 的延迟，这是因为浏览器在等待看这次触摸是不是要进行滚动操作。这就导致了 @touchstart 和 @click 事件可能会发生冲突，尤其是当你想要在触摸屏设备上执行不同的操作时。
为了解决这个问题，可以采用以下策略：
- 使用
touch事件处理程序来处理快速移动后的触摸行为，并阻止click事件的默认行为。 - 使用
touch事件的preventDefault方法来阻止click事件触发。
以下是一个简单的 Vue 示例代码：
<template>
<div @touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="handleClick">
Tap me!
</div>
</template>
<script>
export default {
methods: {
handleTouchStart(event) {
// 处理触摸开始
console.log('Touch start');
// 阻止 click 事件
event.preventDefault();
},
handleTouchEnd(event) {
// 处理触摸结束
console.log('Touch end');
// 阻止 click 事件
event.preventDefault();
},
handleClick(event) {
// 处理 click 事件
console.log('Click');
// 阻止 click 事件
event.preventDefault();
}
}
}
</script>在这个例子中，当用户触摸屏幕时，会触发 handleTouchStart 和 handleTouchEnd 方法，并通过 event.preventDefault() 阻止了 click 事件的触发。而当快速点击后，click 事件不会被触发，因为它已经被 touch 事件处理程序阻止了。