关于"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 ...
随机推荐
- 2-SAT问题简述
前置知识 强连通分量 k-SAT问题 k-SAT问题中的SAT意思就是(stability),也就是适应性问题.本意是给出n个变量,每一个变量有k个状态,并且也给出一些约束条件,要求你求出是否存在每一 ...
- System.Web.mail ----虚拟发件人发送邮件
转载别人的 使用SMTP发送邮件 说到邮件发送,先提一下SMTP. SMTP的全称是“Simple Mail Transfer Protocol”,即简单邮件传输协议.它是一组用于从源地址到目的 ...
- python学习(12)使用正则表达式
1.正则表达式知识 符号 解释 示例 说明 . 匹配任意字符 b.t 可以匹配bat / but / b#t / b1t等 \w 匹配字母/数字/下划线 b\wt 可以匹配bat / b1t / b_ ...
- hdu6314 容斥+数学
题意 : n*m的矩阵 可以涂黑白两色 问至少A行B列为黑色的涂色方案种类数,答案对998244353取模,1<=n,m,A,B<=3000 题解: ans=sum{A,..n}sum( ...
- 还不会K8S吗?先从kubeadm开始吧
目录 1. 准备工作 1.1 机器准备 1.2 系统配置 1.2.1 主机名及域名解析 1.2.2 免密登录 1.2.3 配置yum源 1.2.4 安装必要依赖包 1.2.5 关闭防火墙.SELinu ...
- SSM基础pom和xml的整合配置
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...
- TCP实现连接传输案例
使用的类 ServerSocket 服务器端 构造方法:ServerSocket(端口号); 接收端使用 方法:accept(); 返回一个 Socket对象 getI ...
- C#判断网址的可访问性
/// <summary> /// 判断网址是否可以访问 /// </summary> /// <param name="Url"></p ...
- 坑爹的PostgreSQL的美元符号(有时需要替换成单引号)
今天想在PostgeSQL数据库里建一个存储过程(或函数也行),由于对存储过程比较生疏,上网搜了很多教程和源代码例子,照着写,发现怎么都不行,甚至把网上教程包括官方教程的源代码原封不动的复制下来一执行 ...
- 7z命令行简单使用
7z命令行简单使用 网上有很多博客都有记录7z的命令行使用方式,但看起来乱起八糟的,不知所云. 急于使用者可以直接看实例 注:我仅仅记录我认为常用的命令,毕竟没有那么多的精力去学习不常用的东西. 简介 ...