gpt4 book ai didi

javascript - 在触摸屏上拖放

转载 作者:数据小太阳 更新时间:2023-10-29 05:10:45 26 4
gpt4 key购买 nike

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

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

我最初的理解是,无论我在哪里分配 element.onmousedownelement.onmousemoveelement.onmouseup 我也可以简单地分配分别与 element.ontouchstartelement.ontouchmoveelement.ontouchend 相同的处理程序。

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

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

最佳答案

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

如果您要添加事件监听器,则可以像这样向“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

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

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

关于javascript - 在触摸屏上拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11817750/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com