防止在IOS和Android中拖动页面滚动

4 回答

• 22

  您需要覆盖默认触摸行为以停止拖动页面的touchevents . 显然，如果您的页面大于可用区域，您将需要再次处理它们，但是当您正在制作游戏时，假设您正在进行100％/ 100％布局 .

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

  编辑：这是W3C recommendation谈论触摸事件，这对你来说可能很方便 .

  回复于 2024-04-26T16:36:42+08:00
• 10

  如果您不想使用jQuery mobile或任何其他库，那么您可以试试这个 .

  var startX, startY, endX, endY;
  document.addEventListener("touchstart", function(e){
      startX = e.touches[0].pageX;
      startY = e.touches[0].pageY;
  
      e.preventDefault();//Stops the default behavior
  }, false);
  
  document.addEventListener("touchend", function(e){
      endX = e.touches[0].pageX;
      endY = e.touches[0].pageY;
  
      e.preventDefault();//Stops the default behavior
  }, false);
  

  回复于 2024-04-26T16:36:42+08:00
• 3

  由于最近版本的Chrome中所做的更改，以上答案不再正确 . 将touch事件侦听器附加到document或body元素将导致事件侦听器以"passive"模式注册，这将导致忽略对 preventDefault 的调用 .

  有两种解决方案：

  • 首选解决方案是使用CSS样式touch-action指定不应发生滚动（例如，使用值"none"）

  • 如果这种情况不合适（例如，如果交互类型应该以在手势开始之前无法确定的方式动态更改），那么事件监听器必须使用第二个参数集注册到 { passive: false } （您应该执行浏览器检测但要确保首先支持此样式 .

  回复于 2024-04-26T16:36:42+08:00
• 10

  canvas.addEventListener('touchstart', function(e)
  {
      alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
  }
  canvas.addEventListener('touchend', function(e)
  {
      alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
  }
  

  这是一篇关于在手机上触摸和手势的好文章：

  http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

  回复于 2024-04-26T16:36:42+08:00