iPad Safari 事件处理程序

发布于 2024-11-25 12:37:55 字数 598 浏览 2 评论 0原文

假设我有一个包含多行的框/表。这些行是可拖动的。

现在我有一个 JS,我已经为 iPad 实现了 touchstart、touchmove、touchend 的事件处理程序......基本上它们只是将这些事件映射到相应的鼠标事件,如 mouseover、mousedown、mouseup 等。

现在这是我的问题;

虽然我可以从表中拖动任何行,但我也希望能够滚动它。当我在屏幕上按下任何手指并向下拖动时,它会执行该行的拖动操作(因为我使用 event.preventDefault() 进行 touchmove 以防止默认滚动区域)。

现在我明白我不能使用一根手指同时执行这两个操作(拖动/滚动)。 所以我想在使用两根手指时实现/具有滚动操作..(另一种情况,即对于单指,它应该执行拖动操作)

现在我知道 event.touches.length/event.targetTouches.length 没有在屏幕上显示手指,我不知道如何使用它来执行滚动操作...仅供参考,此滚动与我们的类似在 iPad 上实现固定高度的 div 滚动(overflow:auto),iPad 提供了开箱即用的功能。

Let's say I have a box/table with multiple rows.. These rows are draggable.

Now I have a JS where I have implemented event handlers for touchstart,touchmove, touchend for the iPad....Basically they just map these events to corresponding mouse events like mouseover, mousedown, mouseup, etc

Now here is my issue;

While I am able to drag any of the rows from the table, I also want to be able to scroll it. When I press any finger on screen and drag down, it does the drag action for that row (since I am using event.preventDefault() for touchmove to prevent the default scrolling region).

Now I understand that I cannot have both the actions (drag/scroll) using a single finger..
So I want to implement/have a scroll action when 2-fingers are used.. (The other case i.e. for single finger, it should do the drag action)

Now I am aware that event.touches.length/event.targetTouches.length gives no of fingers on screen, I am not sure how to use that to do the scrolling action... Just as an FYI, this scrolling would be similar to what we get on the iPad for fixed height div scrolling (overflow:auto), which iPad provides out-of-the-box..

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

2024-12-02 12:37:55

您可以稍后触发 PreventDefault(可选)。
首先确定您是否想要自定义/拖动行为。

像这样的东西:(我不知道这个确切的代码是否会工作,因为我现在无法测试它,这假设你使用 jQuery,并且我不知道手指数量的事件属性,但只是为了给你一个想法:)

$('#SomeElement').TouchMove(
   function(e)
     {
        if( /* number of fingers equals one */ )
        { 
          e.preventDefault()
          //more element-drag code could go here
          return;
        }
     }
);

You could fire preventDefault later, and optionally.
Figuring out if you want the custom / drag behavior first.

something like this: ( i have no idea if this exact code will work since i cannot test it right now, this assumes you use jQuery, and i don't know the event properties for the number of fingers but just to give you an idea:)

$('#SomeElement').TouchMove(
   function(e)
     {
        if( /* number of fingers equals one */ )
        { 
          e.preventDefault()
          //more element-drag code could go here
          return;
        }
     }
);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文