指针事件不支持同时鼠标按钮

Question

虽然

mousedown

/

mouseup

可以处理多个鼠标按钮，并且

pointerdown

/

pointerup

可以处理多点触控，但

pointerdown

/

pointerup

无法同时处理两个或多个鼠标按钮。 （在 Windows 上的 Chrome/Firefox 中测试）

正如预期的鼠标事件：

mousedown, button: 0
mousedown, button: 1
mouseup, button: 0
mouseup, button: 1

意外的指针事件：

pointerdown, button: 0
// button 1 pressed, nothing
// button 0 release, nothing
pointerup, button: 1

演示：

window.addEventListener('pointerdown', (e) => {
  console.log('pointerdown', e.pointerId, e.pointerType, e.button)
})
window.addEventListener('pointerup', (e) => {
  console.log('pointerup', e.pointerId, e.pointerType, e.button)
})
window.addEventListener('mousedown', (e) => {
  console.log('mousedown', e.button)
})
window.addEventListener('mouseup', (e) => {
  console.log('mouseup', e.button)
})

Click anywhere

这是预期的还是（已知的）错误？

你什么时候需要这个？例如。使用鼠标中键平移表面，同时使用鼠标左键进行选择。

Answer 1

我遇到了同样的问题。 正如评论（source）中所指出的，对于 1 到 2 个按钮之间的转换或反向，看起来不会触发 pointerdown 或 pointerup 事件。 但是会触发 pointermove 事件，其 buttons 字段将指示按下了哪些按钮。

尽管很奇怪，规范指出：

当一个指针被按下时，用户代理必须触发一个名为pointerdown的指针事件 指针进入活动按钮状态。对于鼠标来说，此时 设备从没有按下任何按钮转变为至少按下一个按钮 郁闷。

当一个指针被调用时，用户代理必须触发一个名为pointerup的指针事件 指针离开活动按钮状态。对于鼠标来说，此时 设备从至少按下一个按钮转变为没有按钮 郁闷。

当一个指针被调用时，用户代理必须触发一个名为pointermove的指针事件。 指针更改任何不触发指针向下的属性或 指针向上事件

window.addEventListener('pointerdown', (e) => {
  console.log('pointerdown', e.pointerId, e.pointerType, e.button)
})
window.addEventListener('pointerup', (e) => {
  console.log('pointerup', e.pointerId, e.pointerType, e.button)
})
window.addEventListener('mousedown', (e) => {
  console.log('mousedown', e.button)
})
window.addEventListener('mouseup', (e) => {
  console.log('mouseup', e.button)
})
window.addEventListener('pointermove', (e) => {
  if (e.buttons > 0)
    console.log('pointermove', e.buttons)
})

Click anywhere