如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述
在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart
事件代替 click
事件。
为什么这样效果会更好呢?根据Google开发者文档中的描述:
click
事件触发时延迟 300ms ,以确保这是一个“单击”事件而非“双击”事件。touchstart
事件而言,则会在用户手指触碰屏幕的一瞬间触发所绑定的事件。所以,使用 touchstart
替换 click
事件的意义在于,帮助用户在每次点击时节省 300ms 的时间。在页面频繁需要点击,或者点击发生在动画中,对动画流畅度有较高要求的情境下,使用这种技术是非常必要的。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
事件的冲突问题。这种方法避免了我们书写两次同样的代码,并且相较于第一种方法更加符合逻辑,因此是我所推荐的。
如何解决 touchstart 事件与 click 事件的冲突的更多相关文章
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端开发用touch事件还是click事件
前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...
- tap,touch,touchstart,事件与click事件的区别
根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...
- 移动端touch事件影响click事件的相关解决方法
preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->cl ...
- touchstart 事件与 click 事件的冲突
const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) retu ...
- 移动端touch拖动事件和click事件冲突问题解决
通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准 ...
- onblur事件和click事件冲突
在js中onblur事件的优先级click事件,所以同一个元素上绑定两个事件的时候,onblur事件会冲掉click事件. 解决方案:将click事件改成mousedown事件
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
随机推荐
- My97DatePicker选择两个日期范围不超过30天的demo
需求 ExtJs下使用My97DatePicker对时间范围不超过30天进行选择. 关键点 使用全局变量. 对选择完的第一个日期进行逻辑判断.(我的逻辑能力还有待加强啊) 因为当选择了第一个框范围在超 ...
- u-boot核心初始化
异常向量表:异常:因为内部或者外部的一些事件,导致处理器停下正在处理的工作,转而去处理这些发生的事件.ARM Architecture Reference Manual p54页.7种异常的类型:Re ...
- css的浮动与定位
显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 disp ...
- MySQL绿色版安装
下载MySQL绿色版 去官方下载mysql.,我下载的是 mysql-5.6.27-winx64,下载后解压缩到D:盘. 安装MySQL服务 拷贝my-default.ini重命名为my.ini,修改 ...
- 制作U盘Win10 PE
1.安装Windows ADK 下载地址 http://go.microsoft.com/fwlink/p/?LinkID=232339 2. 已管理员身份启动“部署和映像工具环境” 3.创建WinP ...
- 关于CSS的外边距合并问题
首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...
- java使用*导包的性能
项目中切换到IDEA工具,使用Git提交代码之后在comments中被吐槽了.事情是这样的原有的导入包被IDEA优化了,譬如java.util.Set, java.util.Map, ... 会被优化 ...
- java thread 线程锁同步,锁,通信
12.线程同步 当多个线程访问同一个数据时,非常容易出现线程安全问题.这时候就需要用线程同步 Case:银行取钱问题,有以下步骤: A.用户输入账户.密码,系统判断是否登录成功 B.用户输入取款金额 ...
- 如何通过以太坊智能合约来进行众筹(ICO)
前面我们有两遍文章写了如何发行代币,今天我们讲一下如何使用代币来公开募资,即编写一个募资合约. 写在前面 本文所讲的代币是使用以太坊智能合约创建,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还 ...
- 关于在windows10中的vmware9.0里面安装的ubuntukylin15.04和windows共享目录的一些反思
关于在windows10中的vmware9.0里面安装的ubuntukylin15.04和windows共享目录的一些反思 一.遇到的问题 如题目所说,在windows的虚拟机中和windo ...