【问题标题】:AngularJs $swipe not firing end event on mouseupAngularJs $swipe 没有在 mouseup 上触发结束事件
【发布时间】:2014-10-26 05:46:09
【问题描述】:

问题:我们是否应该在运行时检查触摸设备(使用 Modernizr.touch?),然后在它是触摸设备时使用角度滑动服务,在不是触摸设备时使用鼠标事件?

目标:我正在编写一个滑块指令,我想移动滑块按钮。 我想在桌面上处理 mousedownmousemovemouseup 事件,并且我希望在触摸屏上具有类似的行为。我可以很好地处理桌面上的鼠标事件,但我修改了代码以使用 angular 的 $swipe 服务。现在触摸屏功能运行良好,但如果桌面浏览器上的 mouseup 事件发生在目标元素之外,则会丢失。

这是一个演示 $swipe 实用程序的 jsBin: http://jsbin.com/berome/1/edit?html,js,console,output

在触摸屏设备上,演示功能正常。 start 事件、move 事件和 end 事件分别在将手指拖过目标元素时触发。

在桌面上,startmove 事件会触发,但 end 事件只会在 mousedown 时触发em> 在目标 div 内时被释放。这是预期的行为,因为 mouseup 已绑定到目标元素。但是,如果在 mousemove 事件期间将光标移出 div,然后释放鼠标按钮,则不会发生 end 事件。此外,当光标在目标内返回时,mousemove 事件将继续触发! (在演示中尝试一下。它会卡在 mousemove 状态,直到目标内的另一个 mousedown-mouseup 序列)

对于桌面实现,mousedown 将绑定到目标元素,mousemovemouseup 将绑定到 mousedown 事件中的 $window(或某些父元素)。 mouseup 将始终触发,即使在释放鼠标时 - 即使光标在目标元素之外! mousemovemouseup 将在 mouseup 事件中解除绑定。

似乎还没有太多使用 $swipe 的文档或示例。 ngBook 有一两段但没有工作示例。有什么建议或cmets?我倾向于两种实现方式:一种用于触控,一种用于桌面。

谢谢!

【问题讨论】:

    标签: angularjs swipe


    【解决方案1】:

    你是对的,关于 ngTouch 的 $swipe 的文档很少。刚开始研究这个我很难找到任何东西。所以谢谢你的例子。 从我有限的理解中我可以看到的唯一解决您的问题的方法是您将其视为触摸设备上的滚动并取消。这些句子来自documentation

    如果垂直距离更大,这是一个滚动,我们让 浏览器接管。发送取消事件。

    cancel 要么在浏览器的 touchcancel 上调用,要么在我们 如上所述开始滚动。

    我没有尝试过任何这些,但我想到了这个想法,我认为它可能对你和我都有用(因为我相信我很快就会处理它)。

    【讨论】:

      猜你喜欢
      • 2016-03-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-09-07
      • 2017-08-27
      • 1970-01-01
      • 2014-11-29
      • 2013-03-14
      相关资源
      最近更新 更多