Better

Ethan的博客,欢迎访问交流

Pointer 事件

最近更新 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。

具体原因可查看:Value of button attribute for pointermove event



留言