Question

这是使用div容器的代码：

<html><body>
<div id="container">Test</div>
<script type="text/javascript">   
  var xDown=null;
  var yDown=null;
  function handleTouchStart(e){
     xDown=e.touches[0].clientX;
     yDown=e.touches[0].clientY;
  }
  function handleTouchMove(e){
     alert('Swiped');
  }
  //Tried this:
  document.getElementById("container").ontouchstart=function(e){
    handleTouchStart(e);
  };
  document.getElementById("container").ontouchmove=function(e){
    handleTouchMove(e);
  };
  // and tried this
  document.getElementById("container").addEventListener('touchstart',handleTouchStart,false);
  document.getElementById("container").addEventListener('touchmove',handleTouchMove,false);
</script>
</body></html>

现在因为只有一个html div我会想象这个div应该占据整个页面进行滑动。这不是效果。它似乎只在左上角工作。

现在当我drop the div并使用该文档时，它完美无缺：

document.addEventListener('touchstart',handleTouchStart,false);
document.addEventListener('touchmove',handleTouchMove,false);

如何让触摸手势在我的div上工作？ 目标是最终将代码移动到可以左右滚动照片的模态窗口

Answer 1

您的代码没有任何问题。它工作正常。

这是你做出的假设：

现在因为只有一个html div我会想象这个div应该占据整个页面进行滑动。

您需要让div填满整个页面。使用这个css类。

.full-screen {
    width:100%;
    height:100%;
}

将此课程应用于html和document元素，以及div

<html class="full-screen">
<body class="full-screen">
    <div id="container" class="full-screen">Test</div>
</body>
</html>

触摸事件适用于文档元素，但不适用于div容器

1 个答案: