AngularJs $不会在mouseup上触发结束事件

时间:2014-10-26 05:46:09

标签: angularjs swipe

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

目标:我正在编写Slider Directive,我想移动滑块按钮。 我想在桌面上处理 mousedown mousemove mouseup 事件,我希望在触摸屏上有类似的行为。我在桌面上使用了鼠标事件,但我已经修改了代码以使用有角度的 $ swipe 服务。现在触摸屏功能运行良好,但如果桌面浏览器上的 mouseup 事件发生在目标元素之外,则会丢失。

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

在触摸屏设备上,演示功能正常。在目标元素上拖动手指时,启动事件,移动事件和结束事件分别触发。

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

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

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

谢谢!

1 个答案:

答案 0 :(得分:1)

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

  

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

     

取消可以在浏览器的touchcancel上调用,也可以在我们调用时调用   如上所述开始滚动。

我还没有尝试过这个,但是我想到了这个想法,我觉得它对你我来说可能有用(因为我确定我很快就要处理它)。