安卓机大面积接触导致touchmove事件的处理

xiaoxiao2021-02-28  18

看视频教程时,说到一个安卓机的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; }); })();

不管明不明显,还是这样处理一下比较好。。

转载请注明原文地址: https://www.6miu.com/read-2250246.html

最新回复(0)