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

在移动端,手指点击一个元素,会经过: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. PAT-1056 Mice and Rice (分组决胜问题)

    1056. Mice and Rice Mice and Rice is the name of a programming contest in which each programmer must ...

  2. CF838A

    题目链接:http://codeforces.com/contest/838/problem/A 知识点: (void) 题目大意: 给一个 \(n \times m\) 的 01 矩阵,对于矩阵在 ...

  3. CF861D

    题目链接:http://codeforces.com/contest/861/problem/D 解题思路: 优雅的暴力. 对于输入的每一个号码,从短到长找出它的所有子串,用 vector 保存每个号 ...

  4. Spring Boot 教程 (4) - swagger-ui

    Spring Boot 教程 - swagger-ui 1. 什么是Swagger? Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看不到 ...

  5. 用python selenium 单窗口单IP刷网站流量脚本

    近期有朋友说需要增加自己网站的流量,故用python写了一个简单的脚本,配合IP池或者动态IP都可以刷,当然最爽的是单窗口单IP. 说明 作弊可耻! 环境 python3.8 + selenium + ...

  6. springboot的springMVC配置,源码

    1,前端控制器自动管理 DispatcherServletAutoConfiguration 中 此方法创建了前端控制器 注册了前端控制器 其中标黄色一行最后的  .getPath()方法点进去 St ...

  7. 盘点Mysql的登陆方式

    前置知识 我们想登陆到mysql中前提是肯定需要一个用户名和密码:比如 root root 在mysql中用户的信息会存放在 mysql数据库下的 user表中 可以 use mysql 然后sele ...

  8. (板子) 最小生成树 买礼物 luogu P1194

    luogu题目传送门! 懒得找最小生成树模板了,就把这题当板子吧. 最小生成树,就是指对于一张图,我们将图转换成一棵树,连通的,同时让所有的边尽可能的小(废话). 最小生成树一般都采用Kruskal算 ...

  9. [PHP学习教程 - 网络]004.模拟发送HTTP请求[GET/POST](HTTP Simulator)

    引言:经常在开发期间,客户端与服务端的调试都是借助于真实的容器返回.尤其是在处理到POST时,通常刚刚入门的兄弟姐妹就一定要借助容器.今天,我们就来处理一下模拟HTTP. 本文列举了常见的四种请求方式 ...

  10. ERROR: ...hbase.PleaseHoldException: Master is initializing

    同学升级HBase后遇到这个问题,hbase shell,status就可以看到 ERROR: -hbase.PleaseHoldException: Master is initializing 解 ...