防止移动设备在触摸输入时滚动网页

Question

我正在为我的平面设计作品集创建一个模拟操作系统(图形化(的网站-http://dreamstate.graphics/.这意味着我需要几个元素可以拖动。在台式电脑上一切都很好，但在手机上，用户不能在不滚动整个网站的情况下拖动元素。

点击元素可以很好地作为点击事件，所以网站不会不可用，但我希望能够通过触摸输入进行拖动。我知道这个问题以前被问过很多次，但没有一个解决方案对我有效，我完全迷失了方向。

我尝试了什么/我的设置

在CSS中，我隐藏了溢出，并将位置固定在容器元素和主体上：

body, html {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}

在Javascript中，我阻止了touchmove的默认功能：

document.addEventListener("touchmove", function(e) {
e.preventDefault()
}, {
passive: false
});

如果我将事件侦听器上被调用的函数更改为alert("it works")，则不会向我发出警报，因此它可能无论如何都不会检测到touchmove事件。我确实有视频覆盖，但它们被设置为touch-action: none;。

我做错了什么？如何防止滚动干扰触摸功能？

Answer 1

需要处理3个事件："触摸启动"触摸移动"；，以及"；触摸端"；。

.addEventListener('touchstart', function(e){e.preventDefault();...});
.addEventListener('touchmove', function(e){e.preventDefault();...});
.addEventListener('touchend', function(e){e.preventDefault();...});

Answer 2

<button id="myBtn">click</button>
<div id="doc1">
<p>test click </p>   
</div>
<script>
var docElement1 = document.getElementById("doc1")
function testClick(){
alert("Hello World!");
e.preventDefault();
}
document.getElementById("myBtn").addEventListener("click", testClick);
var isMouseDown = false;
docElement1.onmousedown = function(e){
e.preventDefault();
isMouseDown = true;
};
docElement1.onmouseup = function(e){
e.preventDefault();
if(isMouseDown){
//testClick();
document.getElementById("myBtn").click();
}
isMouseDown = false;
};
</script>