如何解决 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 前夕,遇到一个问题 —— 当时的网站都是为 ...
随机推荐
- 自兴人工智能——Python运算符和操作对象
在Python中支持以下7种运算符: 1.算数运算符: +(加),-(减),*(乘),/(除),%(取余),**(幂):返回x的y次幂,//(取整除):返回商的整数部分 2.比较运算符:(返回的是一个 ...
- vi代码智能提示功能及相关配置
vim是一款支持插件.功能无比强大的编辑器,无论你的系统是linux.unix.mac还是windows,都能够选择他来编辑文件或是进行工程级别 的coding.如果能把vim用好了,不仅编程效率能得 ...
- python数据分析工具包(3)——matplotlib(一)
前两篇文章简单介绍了科学计算Numpy的一些常用方法,还有一些其他内容,会在后面的实例中学习.下面介绍另一个模块--Matplotlib. Matplotlib是一个Python 2D绘图库,试图让复 ...
- yum 安装 nfs,rpcbind 出现错误 libc.so.6(GLIBC_2.14)(64bit) is needed by
错误信息: Running rpm_check_debugERROR with rpm_check_debug vs depsolve:libc.so.6(GLIBC_2.14)(64bit) is ...
- dig挖出DNS的秘密
[最简单的dig用法] 最简单的dig用法,当然就是直接输入dig按回车. 1 2 3 4 5 6 $ dig ; <<>> DiG 9.8.2rc1-RedHat-9.8 ...
- css设置兼容的透明样式
css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...
- 记录一则fsck的简单案例
环境:RHEL 6.5 + ext4文件系统 我个人实验环境的一个虚拟机,开机时在Checking filesystems时,有报错: /dev/mapper/vg_linuxbase-lv_root ...
- jq实现数字增加或者减少的动画
效果图: 1.HTML: <div class="up"></div> <br> <div class="down"& ...
- 回归模型效果评估系列1-QQ图
(erbqi)导语 QQ图全称 Quantile-Quantile图,也就是分位数-分位数图,简单理解就是把两个分布相同分位数的值,构成点(x,y)绘图:如果两个分布很接近,那个点(x,y)会分布在y ...
- CodeForces-731B
如果当天有m支队伍,昨天选择了k个B方案,那么今天还需要买m-k个披萨,如果m-k是奇数,那就先买一种B,剩下的全部买A,如果是偶数,全部买A.如果中途出现只有0支队伍,然而昨天却买了一次B,那么直接 ...