移动端项目经验 JavaScript

Posted 2021-04-17 码匠与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了~

欢迎沟通交流~

投稿或建议联系小编 QQ：3042966101

（长按二维码）