首页用vue解决@touchend和@click在一个标签上共存的问题

用vue解决@touchend和@click在一个标签上共存的问题

时间: 2024-05-04 22:20:20 浏览: 154

vue中touch和click共存的解决方式

在vue开发手机端项目时，我们经常会遇到touch和click共存的情况，比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动，所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上，会影响到click事件的发生。 touch事件和click事件发生先后顺序： touchstart，touchmove，touchend，click 补充知识：touchstart与click同时触发产生冲突的原因我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题在Vue.js中，开发手机应用时常遇到`touch`和`click`事件的共存问题，因为两者在移动设备上可能会产生冲突。这个问题通常出现在需要同时响应触摸和点击操作的场景，例如城市选择页面的字母滑动，其中`touch`事件用于滚动，而`click`事件用于选择。 ### touchstart与click的冲突当一个元素同时绑定了`touchstart`和`click`事件，用户在移动设备上点击该元素时，这两个事件会依次触发。`touchstart`事件首先被触发，紧接着是`touchmove`（如果用户有滑动行为）、`touchend`，最后是`click`事件。由于`click`事件大约有300毫秒的延迟，这是为了等待用户可能的双击操作。这种情况下，事件处理函数会被执行两次，这不是我们期望的行为。 ### 解决冲突的方法 #### 1. 原生JavaScript解决方案 **方法一：使用`preventDefault()`** 在`touchstart`事件的回调中调用`event.preventDefault()`可以阻止`click`事件的发生。这样，用户触摸元素后，`touchstart`事件执行并阻止了后续的`click`事件。 ```javascript const Button = document.getElementById("targetButton"); Button.addEventListener("touchstart", e => { e.preventDefault(); console.log("touchstart event!"); }); Button.addEventListener("click", e => { e.preventDefault(); console.log("click event!"); }); ``` **方法二：基于功能检测绑定事件** 检测浏览器是否支持`touchstart`事件，根据结果决定绑定`touchstart`还是`click`事件。 ```javascript const Button = document.getElementById("targetButton"); const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touchstart'; else return 'click'; })(); Button.addEventListener(clickEvent, e => { console.log("things happened!"); }); ``` #### 2. Vue.js解决方案在Vue中，我们可以利用事件修饰符来处理这个问题。`@touchstart.prevent`和`@touchend.prevent`分别用于阻止`touchstart`和`touchend`的默认行为，确保它们不会影响到`click`事件。 ```html <div class="comment-text" @touchstart.prevent="gtouchstart(XXX)" @touchend.prevent="triggerReply(XXXX)">{{ item.content }}</div> ``` ```javascript data: function () { return { Loop: 0 }; }, methods: { gtouchstart: function (XXXX) { let self = this; // 执行长按的内容 self.Loop = setTimeout(function () { self.Loop = 0; // XXXXXXXXXXXX }, 500); return false; }, triggerReply: function (XXXX) { let self = this; clearTimeout(self.Loop); // 这里是click内容 if (self.Loop !== 0) { // XXXXXXXXXXXX } return false; } } ``` 在这个示例中，`gtouchstart`方法用于处理长按，`triggerReply`方法处理点击。通过设置定时器并在`touchend`时清除，可以确保只有在没有长按时才会触发`click`事件。 ### 点击事件顺序在移动端，点击事件可以分解为以下步骤： 1. `touchstart`: 用户触摸屏幕。 2. `touchmove`: 用户手指在屏幕上移动（如果有的话）。 3. `touchend`: 用户手指离开屏幕。 4. `click`: 如果用户没有触发`touchmove`，则在一定延迟后触发`click`事件。正确处理这些事件，可以避免在Vue或任何其他前端框架中出现`touch`和`click`事件的冲突，确保用户交互的顺畅性。

在 Vue 中，@click 会监听鼠标点击事件，而 @touchend 监听触摸屏幕结束事件。如果同时在一个标签上使用这两个事件，可能会出现冲突，导致点击事件无法触发。为了解决这个问题，可以在标签上添加一个 `v-on:touchstart.passive`，这样就可以保证在触摸屏幕时不会阻止默认行为，从而解决冲突问题。具体代码如下： ```html <button @click="onClick" @touchend="onClick" v-on:touchstart.passive>点击我</button> ``` 其中，`v-on:touchstart.passive` 可以理解为在触摸屏幕开始时添加一个监听事件，并且在事件处理函数中使用 `event.preventDefault()` 防止冒泡。另外，为了避免在移动端出现点击延迟的问题，可以使用 `fastclick` 或者 `v-tap` 等第三方库来解决。

阅读全文