在触摸屏上拖放

Question

我一直在寻找关于这些事件如何运作的明确指南,现在我比起初时更困惑.

我网站的某些功能涉及拖放.当前移动设备(或任何没有鼠标的东西)通过让用户选择项目,点击"移动"按钮,然后触摸放置点来支持.虽然这很有效(项目在可见网格上),但它不像拖动那样用户友好.

我最初的理解是,只要我给你element.onmousedown,element.onmousemove而且element.onmouseup我可以简单地也将相同的处理程序element.ontouchstart,element.ontouchmove并element.ontouchend分别.

但是,这留下了以下问题:

• 如何获取触摸点的坐标,以及它的相对位置？
• 是否会平移视图(拖动的默认操作),如果可以取消？
• 如果一个手指恰好位于可拖动元素上,如何避免干扰多点触摸操作(如捏缩放)？

Answer 1

其他答案更好地解决了原始问题,但对于后代,像我一样,发现此链接试图使现有的点击/拖动(鼠标)功能在触摸屏上工作,这是一个非常简单的解决方案.

如果您要添加事件侦听器,则可以向"mousedown"添加相应的"touchstart"行,如下所示:

 document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
 document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);

对任何鼠标移动(touchmove)和mouseup(touchend)执行相同操作.

在您的函数中,当您获得鼠标坐标时,请使用:

  var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value

这样它会检查鼠标点击并先拖动,然后如果未定义,则会查找触摸交互.

就像我说的那样,非常准确,但它让我开始工作.

Answer 2

您可以通过测量设备宽度/高度（window.innerHeight/window.innerWidth）来确定坐标。

本文是触摸事件和覆盖它们的一个很好的起点： http://www.html5rocks.com/en/mobile/touch/

多点触摸手势不应干扰可拖动元素。如果条件语句会干扰，您可以在事件处理程序中使用条件语句： (event handler) if (event.touches === 1) handle the event