本文转载于:专业的前端网站➞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