javascript - 在触摸屏上拖放

Question

我一直在寻找有关这些事件如何运作的清晰指南，但现在我比开始时更加困惑。

我网站的某些功能涉及拖放。目前，移动设备(或任何没有鼠标的设备)都支持让用户选择项目，点击“移动”按钮，然后触摸放置点。虽然这非常有效(项目位于可见的网格上)，但它并不像拖动那样用户友好。

我最初的理解是，无论我在哪里分配 element.onmousedown、element.onmousemove 和 element.onmouseup 我也可以简单地分配分别与 element.ontouchstart、element.ontouchmove 和 element.ontouchend 相同的处理程序。

然而，这留下了以下问题:

• 如何获取触摸点的坐标，它相对于什么？
• 是否会平移 View (拖动的默认操作)，如果是，是否可以取消？
• 如果一根手指恰好在可拖动元素上，我该如何避免干扰多点触控操作(例如捏合缩放)？

Answer 1

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

如果您要添加事件监听器，则可以像这样向“mousedown”添加相应的“touchstart”行:

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

对任何 mousemove (touchmove) 和 mouseup (touchend) 执行相同的操作。

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

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

这样它会首先检查鼠标单击和拖动，然后如果未定义，它会查找触摸交互。

就像我说的，非常准系统，但它让我开始了。