我正在尝试与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
touch[0].screenX
。我应该使用touch[0].clientX
,与Y相同。希望这对某人有帮助,请再见