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个事件：“touchstart”、“touchmove”和“touchend”。

.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>

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

我尝试过的/我的设置

2 个答案: