看视频教程时，说到一个安卓机的bug，就是当手指点击页面的面积过大时会触发元素的滑动事件，这样会导致一些不想要的效果。就该问题实测了一番：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 300px; height: 300px; background: red; font-size: 20px; } </style> </head> <body> <div class="box"> <p></p> <p></p> </div> <script> (function () { var box = document.querySelector('.box'); var p1 = box.children[0]; var p2 = box.children[1]; box.addEventListener('touchstart',function (e) { console.log(e); p1.innerHTML = 'x:'+e.changedTouches[0].pageX+'<br/>y:'+e.changedTouches[0].pageY+''; }); box.addEventListener('touchmove',function (e) { console.log(e); p2.innerHTML = 'x:'+e.changedTouches[0].pageX+'<br/>y:'+e.changedTouches[0].pageY+''; }); })(); </script> </body> </html>模拟器上是不存在这问题的，直接跳过，进入真机测试，但其实测试的时候并不明显。
点击的时候在p1里面显示点击的坐标，滑动的时候在p2里展示滑动时的坐标，实测发现确实有这问题：
小面积点击时：
整个手指接触时，并没有滑动：
可以看到出现了这样的状况，实际上并没有滑动，只是因为接触面积太大，系统误认为是在滑动，出发了touchmove事件，我称之为“假滑动”。处理的办法就是在点击的时候将位置信息存储一下，移动事件触发的时候取到移动时的位置信息，两者对比判断是否是真的产生了滑动。
(function () { var box = document.querySelector('.box'); var p1 = box.children[0]; var p2 = box.children[1]; var pos = {}; box.addEventListener('touchstart',function (e) { p1.innerHTML = 'x:'+e.changedTouches[0].pageX+'<br/>y:'+e.changedTouches[0].pageY+''; pos.x = Math.round(e.changedTouches[0].pageX); pos.y = Math.round(e.changedTouches[0].pageY); }); box.addEventListener('touchmove',function (e) { var nowPos = { x: Math.round(e.changedTouches[0].pageX), y: Math.round(e.changedTouches[0].pageY) }; if(nowPos.x === pos.x && nowPos.y === pos.y) { return // 直接返回掉 } p2.innerHTML = 'x:'+nowPos.x+'<br/>y:'+nowPos.y+''; pos = nowPos; }); })();不管明不明显，还是这样处理一下比较好。。
