JS中touchstart事件与click事件冲突的解决方法


Posted in Javascript onMarch 12, 2018

前言

移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用。

下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容,下面话不多说了,来一起看看详细的介绍吧。

一 · 业务场景的描述

在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件。

为什么这样效果会更好呢?根据Google开发者文档中的描述:

移动设备上的浏览器将会在 click 事件触发时延迟 300ms ,以确保这是一个“单击”事件而非“双击”事件。
而对于 touchstart 事件而言,则会在用户手指触碰屏幕的一瞬间触发所绑定的事件。所以,使用 touchstart 替换 click 事件的意义在于,帮助用户在每次点击时节省 300ms 的时间。在页面频繁需要点击,或者点击发生在动画中,对动画流畅度有较高要求的情境下,使用这种技术是非常必要的。

但是,让我们回到我们的初始场景,在 PC端站点适配移动端时 我们不能简单的进行 touchstart和 click 事件的替换,因为PC并不能识别 touchstart 事件。

二 · 产生冲突的原因

当然,我们可以给某个元素同时绑定 touchstart 和 click 事件,但这将会导致本篇文章解决的问题 -- 这两个事件在移动设备上会发生冲突。

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

三 · 解决方案

针对这样的情境,有以下两种解决方案:

(一)使用 preventDefault

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

这从道理上是讲不通的,毕竟,我们添加的 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 event! 字段,很显然,click 事件被成功阻止了。

总结

使用该方法的优点在于简单粗暴,直接有效,能够很好的实现我们的目标,但缺点在于, preventDefault 方法为阻止 click 事件的方式是浏览器实现上的,而不是 preventDefault 原理上的,这会带来一些不确定性,虽然我暂时尚未发现该方法失效的具体场景。

(二)基于功能检测绑定事件

我们可以通过判断浏览器是否支持 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!")
})

总结

该方法的优点在于,我们通过增加一次判断,为元素减少了一个不必要的事件绑定,从而避免了 touchstart 与 click 事件的冲突问题。这种方法避免了我们书写两次同样的代码,并且相较于第一种方法更加符合逻辑,因此是我所推荐的。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
jQuery大于号(>)选择器的作用解释
Jan 13 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 #Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 #Javascript
js中document.write和document.writeln的区别
Mar 11 #Javascript
Javascript 编码约定(编码规范)
Mar 11 #Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 #Javascript
js经验分享 JavaScript反调试技巧
Mar 10 #Javascript
webpack打包node.js后端项目的方法
Mar 10 #Javascript
You might like
PHP 解决session死锁的方法
2013/06/20 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php生成圆角图片的方法
2015/04/07 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
chrome原生方法之数组
2011/11/30 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
python修改字典内key对应值的方法
2015/07/11 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python 获取字符串MD5值方法
2018/05/29 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
Django用户认证系统 User对象解析
2019/08/02 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python软件都是免费的吗
2020/06/18 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
高中数学教师求职信
2013/10/30 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
《识字五》教学反思
2014/03/01 职场文书
业务员管理制度范本
2015/08/06 职场文书
Python机器学习之逻辑回归
2021/05/11 Python