点击事件可以分解成多个事件:

在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->  click


由于移动设备能够同时识别 touchstartclick 事件,因此当用户点击目标元素时,绑定在目标元素上的 touchstart 事件与 click 事件(约300ms后)会依次被触发,也就是说,我们所绑定的回调函数会被执行两次!

解决方案

方法一:使用事件对象中的 preventDefault 方法

preventDefault 方法的作用在于:阻止元素默认事件行为的发生,但有意思的是,当我们在目标元素同时绑定 touchstart 和 click 事件时,在 touchstart 事件回调函数中使用该方法,可以阻止后续 click 事件的发生。

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 事件来封装元素的点击事件,这样客户端会根据当前环境判定元素应该绑定的事件类型。

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!")
});

VUE解决方案:

HTML:

<div class="comment-text"
@touchstart.prevent="gtouchstart(XXX)"
@touchend.prevent="triggerReply(XXXX)">
{{ item.content}}
</div>

JS:

data: function () {
return {
Loop: 0
};
},
methods: {
gtouchstart: function (XXXX) {
let self = this;
//执行长按的内容
self.Loop = setTimeout(function () {
self.Loop = 0;
//XXXXXXXXXXXXXXX
}, 500);
return false;
},
triggerReply: function (XXXX) {
let self = this;
clearTimeout(self.Loop);
//这里click内容
if (self.Loop !== 0) {
//XXXXXXXXXXXXXXX
}
return false;
}
}

添加 touchstart.prevent,组织click事件。

关于"touchstart与click同时触发"问题的更多相关文章

  1. 手机设备上touchstart与click的区别

    1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...

  2. 关于IOS浏览器:document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  3. 触屏touchstart 与 click

    设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消 ...

  4. 使用FastClick的同时造成元素上的trigger('click')无法触发的解决办法

    现象还原: 1. 初始化进入多规格卖场商详页的时候,chrome模拟器切换到安卓环境下,点击加入购物车,规格弹出页没有展示.而在PC和IOS模拟器下,可以弹出规格页 2. 点击加入购物车时,使用 $( ...

  5. 触摸屏touchstart 与 click

    设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消 ...

  6. jquery的click无法触发事件

    一个页面需要在加载后勾选table中所有行的checkbox,于是就这样写 $("table thead tr th input[type='checkbox']").click( ...

  7. checkbox:click事件触发文本框显示隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. click事件触发也有失灵的时候?

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  9. JQuery的click,trigger触发a标签的click事件无效的问题分析

    今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...

随机推荐

  1. React框架概述

    一.React框架概述 官网:https://reactjs.org/       最新版V16.10 中文网:https://zh-hans.reactjs.org/ 中文社区网:https://r ...

  2. GreenPlum执行gpfdist报错:libssl.so.1.0.0: cannot open shared object file: No such file or directory

    当你报这个错时,是因为你执行 ./gpfdist 时默认去找寻/usr/lib64的环境依赖,没有去找寻你gpfdist安装目录中lib的目录. 解决方法: 根据报错提示,将你gpfdist安装目录中 ...

  3. 王艳 201771010127《面向对象程序设计(java)》第二周学习总结

     王艳 201771010127<面向对象程序设计(java)>第二周学习总结 第一部分:理论知识学习部分 3.1:基本概念. 1)标识符:标识符由字母.数字.美元符号以及下划线组成.且第 ...

  4. DFS序--一般都要转化为顶点到每个点

    There is a rooted tree with n nodes, number from 1-n. Root’s number is 1.Each node has a value ai. I ...

  5. poj3613 求经过n条边的最短路 ----矩阵玩出新高度 。

    For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a relay race usin ...

  6. 存储层技术:JDBC、Hibernate、Mybatis三者之间的比较学习

    JDBC     Hibernate Mybatis    (Java  DataBase Connnection) 是通过JAVA访问数据库 对JDBC的轻量封装 像操作对象操作数据库 对SQL的轻 ...

  7. zqt_helper 轻松开发Qt5 Widgets应用

    目标: 1. 代码更加紧凑,所写即所到. 2. 代码层次更直观,直接反映界面窗口层次关系. 3. 不继承类,不重写虚函数,slot接收QEvent. 4. 简单写布局,忘掉api函数. 5. 免去一大 ...

  8. web项目——org.apache.jasper.JasperException: /WEB-INF/content/mainForm.jsp (line: 3, column: 62) File "/WEB-INF/c.tld" not found

    报错信息: HTTP Status 500 – Internal Server Error Type Exception Report Message /WEB-INF/content/mainFor ...

  9. C#正则表达式基础

    namespace ---> System.Text.RegularExpressions. static void Main(string[] args) { // if (IsInputMa ...

  10. 函数:exit()

    函数名: exit() 所在头文件:stdlib.h(如果是"VC6.0"的话头文件为:windows.h) 功 能: 关闭所有文件,终止正在执行的进程. exit(1)表示异常退 ...