安卓机⼤⾯积接触导致touchmove事件的处理
看视频教程时，说到⼀个安卓机的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>
模拟器上是不存在这问题的，直接跳过，进⼊真机测试，但其实测试的时候并不明显。meta大裁员
点击的时候在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 = und(e.changedTouches[0].pageX);
pos.y = und(e.changedTouches[0].pageY);
});
box.addEventListener('touchmove',function (e) {
var nowPos = {
x: und(e.changedTouches[0].pageX),
y: und(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;
});
})();
不管明不明显，还是这样处理⼀下⽐较好。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。