如何去除网页上的触摸偏移？

Question

我正在尝试与我的网络应用程序进行一些触摸集成，我注意到在触摸时移动的块下方发布的代码有一个恒定的偏移量，我可以通过进入 f11 模式暂时删除它。我如何移除它，使块始终在手指下？

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<title>A title</title>
</head>
<style>
body {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -8px;
    left: -8px;
    overflow: hidden;
}

</style>
<body>
<div id="bup" style="position:absolute; background-color:blue;width:100px;height:100px;"></div>

<script>
var touch = [];

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
    touch = event.touches;
    document.getElementById('bup').style.top= (touch[0].screenY-50) + 'px';
    document.getElementById('bup').style.left= (touch[0].screenX-50) + 'px';
}, false); 
</script>
</body>
</html>

（考虑到块本身是 100x100px，-50 只是为了让块在我手指上居中）

有

Answer 1

好吧，我自己解决了。问题是 touch[0].screenX。我应该使用 touch[0].clientX，Y 也一样。

希望这对某人有所帮助，再见

如何去除网页上的触摸偏移？

How to remove touch offset on webpage?

html

javascript

touch