Touch开发必须知道的事儿
2017-12-27 17:13
337 查看
持续跟大家分享一些最新的前端技术进展、开发最佳实践,好了,不多说了,言归正传,今天跟大家分享Touch开发的一些细节问题,希望可以对相关开发人员有所帮助。
判断设备支持touch就只用touch会有问题,因为像Chrome pixel这样的设备同时支持触屏和鼠标,如果这样判断就会让Chrome pixel的鼠标失效,而仅仅是因为它同时支持触屏
element.addEventListener('touchstart', activate);
element.addEventListener('mousedown', activate);
function activate(event) {
... event.preventDefault(); }
MouseEvent的target始终指向cursor所指向的元素,TouchEvent的target只是指向touch start的时候所接触的元素,即使这个dom被删除掉,这样如果当你在touch move某些元素,而其中某个dom有可能在移动中被删除就会出现很诡异的问题
element.addEventListener('touchstart', function(event) {
... event.target.addEventListener('touchmove', onMove); event.target.addEventListener('touchend', onEnd); event.target.addEventListener('touchcancel', onEnd); }
浏览器为了实现双击放缩的手势,会在首次触发click后延迟等待300ms来确认是否是双击事件,这样会导致页面反应迟钝
touchmove事件发生很频繁,会比屏幕刷新率快,通过监听touchmove它来操作会有性能问题
最好不要在每次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可以让动画更流畅,运行性能更高,以后会有一个篇幅专门来介绍它
相信大家都用过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事件之前你需要确认下是否真的需要?
常见问题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事件之前你需要确认下是否真的需要?
相关文章推荐
- PDB文件:每个开发人员都必须知道的
- 前端开发必须知道的JS(一) 原型和继承
- C#程序员开发WinForm必须知道的 Window 消息大全(转)
- 第一章 学习JavaScript必须知道的事儿
- Java程序员必须知道的几种系列辅助开发工具
- Unity开发-你必须知道的优化建议
- 15个必须知道的 Chrome 开发技巧
- Java 领域从传统行业向互联网转型你必须知道的事儿
- Unity开发-你必须知道的优化建议
- Java 领域从传统行业向互联网转型你必须知道的事儿 我为什么要写这篇文章 武林中,"天下武功出少林"指各门各派的武功都与少林武学有一定的渊源,技术也是相同的道理,对于Java领域的应用而言,传统
- C#程序员开发WinForm必须知道的 Window 消息大全
- 分布式事务 ( DTS ) 你必须知道的事儿
- 微服务架构下处理分布式事务,你必须知道的事儿
- 开发第一个Android应用前你必须知道的5件事
- Java 领域从传统行业向互联网转型你必须知道的事儿
- 前端开发必须知道的CSS(一) CSS Hack
- 微信web端开发必须知道的几件事
- PDB文件:每个开发人员都必须知道的
- Unity开发-你必须知道的优化建议
- C#程序员开发WinForm必须知道的 Window 消息大全(转)