本文共 1166 字，大约阅读时间需要 3 分钟。
遇到一个问题：在移动设备上，当你点击元素时，touchStart和click事件会依次触发。由于click事件在移动端有300ms延迟，导致touchStart先触发，随后click事件再被触发，这种情况会导致每次操作执行两次毫无意义的代码。此外，PC端无法识别touch相关事件。
为了解决这个问题，可以采取以下两种方式：
（1）使用preventDefault方法
通过在touchstart事件中添加e.preventDefault()，可以阻止click事件的触发。这种方法在Vue框架中可以通过事件修饰符@touchstart.stop.prevent实现。在method中不需要手动添加e.preventDefault()，只需在触发touchStart事件时调用阻止默认行为即可。 示例代码：
methods: { handleLetterClick(e) { console.log('click事件执行一次'); this.$emit('change', e.target.innerText); }, handleTouchStart(e) { console.log('TouchStart执行一次'); this.touchStatus = true; e.preventDefault(); // 在method中无需手动添加 }} （2）判断浏览器是否支持触屏事件
可以通过检查'ontouchstart' in document来判断浏览器是否支持触屏事件。如果支持touch事件，则调用touchStart事件处理逻辑；如果不支持，直接调用click事件。 示例代码：
methods: { handleLetterClick(e) { console.log('click事件执行一次'); this.$emit('change', e.target.innerText); }, handleTouchStart(e) { console.log('ontouchstart' in document); if ('ontouchstart' in document) { this.handleTouchStart(e); } else { this.handleLetterClick(e); } }, handleSelfClick(e) { // 可以根据需要添加额外逻辑 }} 通过上述方法，可以有效避免在移动设备上触发不必要的click事件，从而优化用户体验。
转载地址：http://cgpiz.baihongyu.com/