最近更新 three 版本时,有些 mouse 事件需要改成 pointer 事件才能被正确触发,那这两个事件有啥区别呢
组件拖拽
很多场景的拖拽功能,通常都要借助 mouse 事件,除此之外,还有 drag 事件和 pointer 事件,那么各自场景是什么呢
- 有很多不同的事件可以帮助我们实现,比如
- Drag 事件
- Mouse 事件
- Pointer 事件
- 注意细节:自身的 down 事件,搭配全局,比如 mask 或 window 的 up 和 move 事件,因为拖动过程中会离开元素,全部作用在自身的话,会中断拖拽
- Drag 事件
- 典型场景:拖动一个元素到特定区域时,毫无疑问只用 drag 事件,通常用于实现数据的移动,而不是元素,比如可拖动列表
- onDrag
- onDragStart
- onDragEnd
- onDragEnter:当拖动一个元素进入一个有效的 drop 目标
- onDragLeave:当拖动一个元素离开一个有效的 drop 目标
- onDragOver:在被拖动元素在一个有效的 drop 目标拖动时
- onDrop:拖动过程中,释放鼠标键时触发此事件
- Mouse 事件
- 典型场景:实际移动或转换元素到一个新的位置
- onMouseDown
- onMouseUp
- onMouseMove
- Pointer 事件
- 本质上和 Mouse 类型,但他是跨硬件的,也就是说不仅 mouse 交互触发,还包括其他指针设备,比如手指触摸或笔触摸
- onPointerDown
- onPointerUp
- onPointerMove
- 通过 CSS 属性达到修改位置的目的
- transform > translate
- top/left
pointermove
最近发现一个 bug,把 mousemove 事件改成 pointermove 事件后,有些逻辑不能正确触发了,因为逻辑使用了 event.button === 0 用于判断是不是左键触发。结果 pointermove 事件的 button 值竟然等于 -1。