关于"touchstart与click同时触发"问题
点击事件可以分解成多个事件:
在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --> click
由于移动设备能够同时识别 touchstart 和 click 事件,因此当用户点击目标元素时,绑定在目标元素上的 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同时触发"问题的更多相关文章
- 手机设备上touchstart与click的区别
1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...
- 关于IOS浏览器:document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- 触屏touchstart 与 click
设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消 ...
- 使用FastClick的同时造成元素上的trigger('click')无法触发的解决办法
现象还原: 1. 初始化进入多规格卖场商详页的时候,chrome模拟器切换到安卓环境下,点击加入购物车,规格弹出页没有展示.而在PC和IOS模拟器下,可以弹出规格页 2. 点击加入购物车时,使用 $( ...
- 触摸屏touchstart 与 click
设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消 ...
- jquery的click无法触发事件
一个页面需要在加载后勾选table中所有行的checkbox,于是就这样写 $("table thead tr th input[type='checkbox']").click( ...
- checkbox:click事件触发文本框显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- click事件触发也有失灵的时候?
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- JQuery的click,trigger触发a标签的click事件无效的问题分析
今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...
随机推荐
- React框架概述
一.React框架概述 官网:https://reactjs.org/ 最新版V16.10 中文网:https://zh-hans.reactjs.org/ 中文社区网:https://r ...
- GreenPlum执行gpfdist报错:libssl.so.1.0.0: cannot open shared object file: No such file or directory
当你报这个错时,是因为你执行 ./gpfdist 时默认去找寻/usr/lib64的环境依赖,没有去找寻你gpfdist安装目录中lib的目录. 解决方法: 根据报错提示,将你gpfdist安装目录中 ...
- 王艳 201771010127《面向对象程序设计(java)》第二周学习总结
王艳 201771010127<面向对象程序设计(java)>第二周学习总结 第一部分:理论知识学习部分 3.1:基本概念. 1)标识符:标识符由字母.数字.美元符号以及下划线组成.且第 ...
- 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 ...
- poj3613 求经过n条边的最短路 ----矩阵玩出新高度 。
For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a relay race usin ...
- 存储层技术:JDBC、Hibernate、Mybatis三者之间的比较学习
JDBC Hibernate Mybatis (Java DataBase Connnection) 是通过JAVA访问数据库 对JDBC的轻量封装 像操作对象操作数据库 对SQL的轻 ...
- zqt_helper 轻松开发Qt5 Widgets应用
目标: 1. 代码更加紧凑,所写即所到. 2. 代码层次更直观,直接反映界面窗口层次关系. 3. 不继承类,不重写虚函数,slot接收QEvent. 4. 简单写布局,忘掉api函数. 5. 免去一大 ...
- 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 ...
- C#正则表达式基础
namespace ---> System.Text.RegularExpressions. static void Main(string[] args) { // if (IsInputMa ...
- 函数:exit()
函数名: exit() 所在头文件:stdlib.h(如果是"VC6.0"的话头文件为:windows.h) 功 能: 关闭所有文件,终止正在执行的进程. exit(1)表示异常退 ...