移动端开发用touch事件还是click事件
前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发。
在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的。
首先,我先说一下touch事件在开发中存在的两个问题:
1.touch事件在某些场景下存在点击穿透的问题。
2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件。
1问题的原因:移动端事件触发的事件顺序为touchstart-->touchend-->click。加入有两个元素A和B,B在A之上,当我们用touch事件中的回调函数让B元素隐藏,随后A元素触发了click事件。这是因为click事件有300ms的延迟,300ms之后,B元素隐藏了,浏览器触发了click事件,B元素隐藏了,该事件被派发到A 元素之上。
点击穿透的这个问题可以在touch事件中取消默认事件,e.preventDefault()来解决。
2问题却无法调和。
其次,click事件存在的问题:
1.click事件存在的问题,就是300ms的延迟问题。
很多开发者认为,在移动端开发崛起初期,用click事件是可以的,因为当时设备的反应却是仅就这300ms来说,是不易察觉的。但是,随着用户交互体验的要求越来越高,这300ms就变得无法忍受。
移动端300ms延迟的由来?
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。
双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面,在欣喜的时候往往不会care这个300ms的延时问题,可是如今touch端界面如雨后春笋,用户对体验的要求也更高,这300ms带来的卡顿慢慢变得让人难以接受。
也就是说,浏览器会有一些默认的行为,如双击缩放,双击滚动等,这些行为主要是为桌面网站在移动着设备中浏览体验而设计的。而在用户进行操作的时候,移动浏览器会优先判断用户是否触发默认的行为。
浏览器开发商的解决方案:
1.禁用缩放。
当在html文档中包含如下标签:
<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="init-scale=1.0,maximum-scale=1.0" />
表明这个页面是不可以缩放的,那么双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
这个方法的缺点是我们如果面对桌面应用的小字,放大看就不可能了。
这种方法完全禁用了缩放,而我们仅仅想禁用双击缩放行为。
2.改变默认的视口宽度
<meta name="viewport" content="width=device-width" />
一开始,为了让桌面站点能在移动浏览器正常显示,移动浏览器默认的视口宽度并不等于设备浏览器的视窗宽度,而是比设备视窗浏览器大,大约为980px.
我们通过上述标签设置移动浏览器的宽度等于设备的视窗宽度。随着响应式的普及,很多站点都已经对移动端做过适配了,这时候就不需要双击缩放了。如果能识别出一个网站是响应式网站,那么浏览器就可以认为已经对移动端做了优化和适配,那么久无需双击操作了。
这种方式比方法一的好处在于不用完全禁用缩放,而只是禁用了浏览器的双击缩放行为。
更多解决方案,查看这篇文章:http://www.jianshu.com/p/6e2b68a93c88
总而言之,在移动端开发的时候,如果页面比较简单,可以用touch事件,如果页面比较复杂,直接用click事件,同意用click的事件的好处是不应担心页面点击穿透的问题。
移动端开发用touch事件还是click事件的更多相关文章
- 移动端开发touchstart,touchmove,touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...
- 如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端touch拖动事件和click事件冲突问题解决
通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准 ...
- tap,touch,touchstart,事件与click事件的区别
根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...
- onblur事件和click事件冲突
在js中onblur事件的优先级click事件,所以同一个元素上绑定两个事件的时候,onblur事件会冲掉click事件. 解决方案:将click事件改成mousedown事件
- 移动端touch事件影响click事件的相关解决方法
preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->cl ...
- touchstart 事件与 click 事件的冲突
const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) retu ...
- 移动端的touch click事件的理解+点透
移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart - ...
随机推荐
- Java中初始化的相关问题
目录 局部变量的初始化 成员变量的初始化 构造器初始化 静态数据的初始化 总结 已经快半个月没写博客了,这周在看 Thinking in Java 这本书,准备将书中的第五章和第七章的内容整合一下,写 ...
- 转:Mongoose使用操作
一般我们不直接用MongoDB的函数来操作MongoDB数据库 Mongose就是一套操作MongoDB数据库的接口. 连接数据库 // mongoose 链接var mongoose = req ...
- surging 微服务引擎 2.0 会有多少惊喜?
surging 微服务引擎从2017年6月至今已经有两年的时间,这两年时间有多家公司使用surging 服务引擎,并且有公司搭建了CI/CD,并且使用了k8s 集群,这里我可以说下几家公司的服务搭建情 ...
- Free MP3 CD Ripper_缓冲区溢出远程代码执行_CVE-2019-9766漏洞复现
Free MP3 CD Ripper_缓冲区溢出远程代码执行_CVE-2019-9766漏洞复现 一.漏洞描述 Free MP3 CD Ripper是一款音频格式转换器.Free MP3 CD Rip ...
- 如何确保TCP协议传输稳定可靠?
TCP,控制传输协议,它充分实现了数据传输时的各种控制功能:针对发送端发出的数据包确认应答信号ACK:针对数据包丢失或者出现定时器超时的重发机制:针对数据包到达接收端主机顺序乱掉的顺序控制:针对高效传 ...
- 模块(二)os hashlib
模块(二)os hashlib 1.序列化模块 1.1 json 将满足条件的数据结构转化成特殊的字符串,并且可以反序列化转回去 # 两对方法 # 1 dumps() loads() ## 多用于网络 ...
- linux c库函数大全
Linux C函数库参考手册 [转自ChinaUnix]第1章字符测试函数isalnum(测试字符是否为英文字母或数字)isalpha(测试字符是否为英文字母)isascii(测试字符是否为ASCI ...
- Codeforces 760C:Pavel and barbecue(DFS+思维)
http://codeforces.com/problemset/problem/760/C 题意:有n个盘子,每个盘子有一块肉,当肉路过这个盘子的时候,当前朝下的这一面会被煎熟,每个盘子有两个数,p ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- ML.NET技术研究系列-2聚类算法KMeans
上一篇博文我们介绍了ML.NET 的入门: ML.NET技术研究系列1-入门篇 本文我们继续,研究分享一下聚类算法k-means. 一.k-means算法简介 k-means算法是一种聚类算法,所谓聚 ...