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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
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计划任务、定时执行任务的实现代码
2011/04/23 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
重新认识php array_merge函数
2014/08/31 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
js传值 判断
2006/10/26 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
几种tab切换详解
2017/02/03 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python抓取文件夹的所有文件
2018/02/27 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python中的时区问题
2021/01/14 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
试用期员工考核制度
2014/01/22 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
先进党支部申报材料
2014/12/24 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
js作用域及作用域链工作引擎
2022/07/07 Javascript