如何删除网页上的触摸偏移量?

问题描述 投票:0回答:1

我正在尝试与Web应用程序进行某些触摸集成,并且注意到在触摸移动块下方发布的代码具有较大的偏移量,我可以通过进入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>

((-50只是为了让块在我的手指上居中,考虑到它本身就是100x100px)

ty

javascript html touch
1个回答
0
投票
好的,我自己解决了。问题是touch[0].screenX。我应该使用touch[0].clientX,与Y相同。

希望这对某人有帮助,请再见

© www.soinside.com 2019 - 2024. All rights reserved.