你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
walterShen

Touch开发必须知道的事儿 11个回复 专栏 @ 无线

walterShen 发布于 3 年前

touch

持续跟大家分享一些最新的前端技术进展、开发最佳实践,好了,不多说了,言归正传,今天跟大家分享Touch开发的一些细节问题,希望可以对相关开发人员有所帮助。

常见问题1:判断设备支持touch就只用touch

touch

判断设备支持touch就只用touch会有问题,因为像Chrome pixel这样的设备同时支持触屏和鼠标,如果这样判断就会让Chrome pixel的鼠标失效,而仅仅是因为它同时支持触屏

解决方案:两个都监听,然后使用preventDefault来避免多次执行

element.addEventListener('touchstart', activate);
element.addEventListener('mousedown', activate);
function activate(event) {
... event.preventDefault(); }

常见问题2:Touch event Target的特殊性

MouseEvent的target始终指向cursor所指向的元素,TouchEvent的target只是指向touch start的时候所接触的元素,即使这个dom被删除掉,这样如果当你在touch move某些元素,而其中某个dom有可能在移动中被删除就会出现很诡异的问题

解决方案:直接使用touched element的target来添加touch move事件

element.addEventListener('touchstart', function(event) {
... event.target.addEventListener('touchmove', onMove); event.target.addEventListener('touchend', onEnd); event.target.addEventListener('touchcancel', onEnd); }

常见问题3:click事件的延迟

浏览器为了实现双击放缩的手势,会在首次触发click后延迟等待300ms来确认是否是双击事件,这样会导致页面反应迟钝

解决方案:使用fastClick类库或禁止放缩(user-scalable=no)

常见问题4:touchMove触发的太快

touch

touchmove事件发生很频繁,会比屏幕刷新率快,通过监听touchmove它来操作会有性能问题

解决方案:通过requestAnimationFrame来更新界面

最好不要在每次touchMove的时候判断event.touches,可以在touchStart的时候缓存这个数组

function updateTouches(event) { touches = event.touches; }
document.addEventListener('touchmove', updateTouches);
window.requestAnimationFrame(renderEverything);
function renderEverything() {
// TODO: Render code goes here. window.requestAnimationFrame(renderEverything); }

使用requestAnimationFrame可以让动画更流畅,运行性能更高,以后会有一个篇幅专门来介绍它

常见问题5:不必要的touch事件监造成成页面滚动卡顿

相信大家都用过iScroll,后来发现有性能问题就不再用了,那为什么iScroll会有性能问题,原因就在于document监听了touchMove事件,所以页面每次在Scroll之前都会先等待来判断touch事件中是否有event.preventDefault,所以即使Chrome尝试通过GPU线程来优化Scroll依然会出现卡顿现象,因为touchMove事件阻塞了JavaScript线程,下面给大家看一个最简单的demo,大家就会了解了:

function reallyFast(event) {}
document.addEventListener('touchstart', reallyFast);
document.addEventListener('touchmove', reallyFast);

大家会发现即使只是touchMove的回调上调用空函数,页面依然会有卡顿出现,当把touch事件监听去掉了,页面滚动很流畅,所以在监听touch事件之前你需要确认下是否真的需要?

  • jpss

    文章很赞,但。。图挂了。

    #1
  • berg

    @jpss 图片上传功能正在做……等我回北京了上线

    #2
  • berg

    @jpss 图片已经修复

    #3
  • season

    禁止放缩(user-scalable=no)可以解决click事件的延迟吗?我记得以前开发过的MobileWebApp是禁止放缩的,但click事件还是会延迟诶

    #4
  • markate

    user-scalable=no 目前仅仅被chrome 32支持吧
    现在应该是:width=device-width 了吧 @walterShen

    #5
  • zhuxiaojian

    requestAnimationFrame这个学习了

    #6
  • mysoko

    iscroll不慢啊,有注意到他们例子里面也都有:
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    requestAnimationFrame在iscroll文档也有提到。

    不过最近玩iscroll倒是遇到真坑,onScroll event里面获取y位置延迟厉害,那样做滚动异步加载就不好控制了。。

    #7
  • 1014142434

    感觉还是hammer.js好用。。。

    #8
  • kunsun
    • 正好用到
    • touchmove
    #9
  • yanhaijing

    写得不错

    #10
  • Paxster

    学习了

    #11
登录后回复,如无账号,请使用邀请码注册