移动端项目经验 JavaScript

HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。

移动端click时间300ms延迟

在移动端,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。

对于这种体验不佳的问题,我们可以使用tap等事件来替代,而tap事件属于模拟类事件,需要引入zepto.js或者百度的touch.js等插件辅助实现。也可以通过使用fastclick.js来解决click的延迟(这个不是使用tap事件去替代)。

元素点击高亮样式的处理

在移动端,出于让用户了解是否点击成功,浏览器会在用户点击一个a标签或者Javascript定义的可点击元素时,出现一个半透明的灰色背景。发明的目的是为了更良好的用户体验,但是这种目的在当前反而成了累赘,大多数的产品都希望能够去掉这个背景。

解决办法很简单:-webkit-tap-highlight-color:rgba(255,255,255,0) 可以同时屏蔽 iOS和安卓点击元素时出现的阴影。-webkit表示的是浏览器内核前缀,表示能够应用于所有webkit内核的浏览器(苹果、谷歌等各种主流浏览器以及安卓系统自带的浏览器采用的均是此种内核,但是注意,IE不是),tap表示轻敲、轻触,highlight-color表示的是高亮颜色。rgba是一种全新的(CSS3新增)表示颜色的方式,最后一位表示透明度,将透明度设置为0,在视觉上自然就看不到了。关于浏览器内核以及浏览器内核前缀可以查看《浏览器内核及内核前缀》

zepto的touch问题

为了处理一些touch事件,我们常会引入zepto等插件进行处理,但是会发现,swipe事件在小米1等低端手机不支持。

解决办法有两种,与其说解决办法倒不如说是权宜之计,一种是干脆不兼容低端手机(当前也是现实的,只要这种手机在市场份额当中占比很少,其实是可以忽略的,就如同当前PC端的兼容,基本都是做到IE8或IE9以上,IE6\7的市场份额已经很小了)。另一种方法则是放弃zepto了~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏信安之路

细节决定成败-WIFI新玩法

最近网络非常的不好看看网页都会卡,哇是真的生气。没有网络的我和咸鱼有什么区别。然后我就想用一下邻居的 WiFi,结果。。跑包钓鱼都没有出来。

750
来自专栏何俊林

FFmpeg总结(十)用ffmpeg进行在视频中加水印图、加gif图

图:越南下龙湾 centos下编译ffmpeg,mac,windows,linux都编译过了,最复杂是windows,当然会了,也不复杂。 编译 编译中… ...

2239
来自专栏郭耀华‘s Blog

上帝之眼APP——实时定位监控、即时通讯

项目地址 https://github.com/guoyaohua/GodsEYE 开发环境 Android studio 2.3.1 极光推送IM SDK 百...

5324
来自专栏FreeBuf

如何用Wireshark捕获USB数据?

现在越来越多的电子设备采用USB接口进行通讯,通讯标准也在逐步提高。那么,我们就会好奇这些设备是如何工作的?而无论你是一个硬件黑客,业余爱好者或者只是对它有一点...

1837
来自专栏BestSDK

腾讯地图开放H5定位API,率先支持iOS10

苹果的iOS 10已经正式对外推送,相信尝鲜的用户已经更新到最新的系统。然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多网站...

3338
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

4297
来自专栏opengps

openGPS.cn - 浏览器定位技术探讨(HTML5定位)

浏览器定位,也就是HTML5定位,据我目前的理解,这俩其实是一个概念。都是随着html5技术的发展而开始进入大众视野。 ​原文连接发布在https://...

4036
来自专栏Youngxj

Emlog自制6.0-特别版(非官方)评测

2273
来自专栏FreeBuf

保护你的隐私:10项你必须知道的iPhone/iPad iOS 8安全设置

也许你并不知道,苹果iOS 8里包含了多项追踪你的地理位置和个人信息的功能,其中不少是默认开启的,很多APP和广告都在通过这些功能获取你的个人信息。 如果你忽视...

1726
来自专栏腾讯社交用户体验设计

极速适配 iPhone X 秘笈

1674

扫描关注云+社区