移动端项目经验 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 条评论
登录 后参与评论

相关文章

来自专栏机器学习算法与Python学习

推荐几个适合新人上手的Python项目

1418
来自专栏前端儿

layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

1261
来自专栏IT大咖说

解读移动端的跨平台开发:TypeScript + Angular

摘要 Google技术经理陈亮将为大家介绍TypeScript和Angular是什么以及如何利用TypeScript和Angular进行移动端的跨平台介绍。 ?...

3518
来自专栏知晓程序

微信全面调整分享能力:开发者应该注意什么?

1415
来自专栏BeJavaGod

扩展Shiro自定义标签

最近在使用shiro做权限,我们采用的是针对资源做限制,而没有采用针对角色的方案,这是比较优的 先列出jsp上的shiro标签 ? 如图,其中有一个shiro...

3444
来自专栏CSDN技术头条

1小时入门 Python 爬虫

前言 随着网络技术的发展,数据越来越变的值钱,诸多公司都在探究如何获取更多更有用的数据。万维网是大量信息的载体,如何有效提取这些有效且公开的数据并利用这些信息变...

3455
来自专栏日常学python

今天说说反爬虫与反反爬虫

这是我的第五篇原创文章 喜欢爬虫的伙伴都知道,在爬网站的内容的时候并不是一爬就可以了,有时候就会遇到一些网站的反爬虫,折回让你爬不到数据,给你返回一些404,4...

3837
来自专栏MixLab科技+设计实验室

就叫Spyfari吧!|数据爬取及可视化系列

这是《数据爬取及可视化系列》的第四篇文章。 前3篇文章,可以查阅: 01基于位置的用户画像初探 02技能之谷歌Chrome爬虫 03 使用Echarts制作可视...

2474
来自专栏面朝大海春暖花开

微信小程序official-account组件开发

官方apihttps://developers.weixin.qq.com/miniprogram/dev/component/official-account...

1912
来自专栏魂祭心

原 ionic+js+html5 飞行射击

3016

扫码关注云+社区