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事件之前你需要确认下是否真的需要?