博客
关于我
vue的touchStart事件及click事件冲突问题
阅读量:539 次
发布时间:2019-03-08

本文共 1166 字,大约阅读时间需要 3 分钟。

遇到一个问题:在移动设备上,当你点击元素时,touchStart和click事件会依次触发。由于click事件在移动端有300ms延迟,导致touchStart先触发,随后click事件再被触发,这种情况会导致每次操作执行两次毫无意义的代码。此外,PC端无法识别touch相关事件。

为了解决这个问题,可以采取以下两种方式:

(1)使用preventDefault方法

通过在touchstart事件中添加e.preventDefault(),可以阻止click事件的触发。这种方法在Vue框架中可以通过事件修饰符@touchstart.stop.prevent实现。在method中不需要手动添加e.preventDefault(),只需在触发touchStart事件时调用阻止默认行为即可。

示例代码:

  • {{ item }}
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事件。

示例代码:

  • {{ item }}
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/

你可能感兴趣的文章
Nim游戏
查看>>
NIO ByteBuffer实现原理
查看>>
Nio ByteBuffer组件读写指针切换原理与常用方法
查看>>
NIO Selector实现原理
查看>>
nio 中channel和buffer的基本使用
查看>>
NIO三大组件基础知识
查看>>
NIO与零拷贝和AIO
查看>>
NIO同步网络编程
查看>>
NIO基于UDP协议的网络编程
查看>>
NIO笔记---上
查看>>
NIO蔚来 面试——IP地址你了解多少?
查看>>
NISP一级,NISP二级报考说明,零基础入门到精通,收藏这篇就够了
查看>>
NISP国家信息安全水平考试,收藏这一篇就够了
查看>>
NIS服务器的配置过程
查看>>
Nitrux 3.8 发布!性能全面提升,带来非凡体验
查看>>
NiuShop开源商城系统 SQL注入漏洞复现
查看>>
NI笔试——大数加法
查看>>
NLog 自定义字段 写入 oracle
查看>>
NLog类库使用探索——详解配置
查看>>
NLP 基于kashgari和BERT实现中文命名实体识别(NER)
查看>>