Touch开发必须知道的事儿

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

常见问题1：判断设备支持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触发的太快

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

转载请注明：前端录»Touch开发必须知道的事儿

更多专业前端知识，请上【猿2048】www.mk2048.com