【发布时间】:2014-10-26 05:46:09
【问题描述】:
问题:我们是否应该在运行时检查触摸设备(使用 Modernizr.touch?),然后在它是触摸设备时使用角度滑动服务,在不是触摸设备时使用鼠标事件?
目标:我正在编写一个滑块指令,我想移动滑块按钮。 我想在桌面上处理 mousedown、mousemove 和 mouseup 事件,并且我希望在触摸屏上具有类似的行为。我可以很好地处理桌面上的鼠标事件,但我修改了代码以使用 angular 的 $swipe 服务。现在触摸屏功能运行良好,但如果桌面浏览器上的 mouseup 事件发生在目标元素之外,则会丢失。
这是一个演示 $swipe 实用程序的 jsBin: http://jsbin.com/berome/1/edit?html,js,console,output
在触摸屏设备上,演示功能正常。 start 事件、move 事件和 end 事件分别在将手指拖过目标元素时触发。
在桌面上,start 和 move 事件会触发,但 end 事件只会在 mousedown 时触发em> 在目标 div 内时被释放。这是预期的行为,因为 mouseup 已绑定到目标元素。但是,如果在 mousemove 事件期间将光标移出 div,然后释放鼠标按钮,则不会发生 end 事件。此外,当光标在目标内返回时,mousemove 事件将继续触发! (在演示中尝试一下。它会卡在 mousemove 状态,直到目标内的另一个 mousedown-mouseup 序列)
对于桌面实现,mousedown 将绑定到目标元素,mousemove 和 mouseup 将绑定到 mousedown 事件中的 $window(或某些父元素)。 mouseup 将始终触发,即使在释放鼠标时 - 即使光标在目标元素之外! mousemove 和 mouseup 将在 mouseup 事件中解除绑定。
似乎还没有太多使用 $swipe 的文档或示例。 ngBook 有一两段但没有工作示例。有什么建议或cmets?我倾向于两种实现方式:一种用于触控,一种用于桌面。
谢谢!
【问题讨论】: