Pointer Events不支持同时触发多鼠标按键？是预期行为还是已知Bug？

虽然mousedown/mouseup以单个按键的状态变化为触发依据，能独立捕获每个按键的按下/松开，但Pointer事件的设计逻辑是围绕单个指针设备展开的：

• 同一鼠标作为一个独立的pointer，在同一时间只会维护一个活跃的pointer会话
• 当第一个按键按下触发pointerdown后，后续按下其他按键不会再触发新的pointerdown；只有当所有按键都松开，指针回到非活跃状态后，新的按键操作才会触发pointerdown

事件表现对比 #

鼠标事件（符合直觉的多按键捕获） #

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

Pointer事件（单指针会话逻辑） #

pointerdown, button: 0
// 按下按键1，无新pointerdown触发
// 松开按键0，无pointerup触发（因为指针仍处于活跃状态）
pointerup, button: 1

多按键场景的解决方案 #

如果需要在Pointer事件体系下处理多鼠标按键同时操作的场景（比如中键平移+左键选择），可以利用pointermove事件中的**buttons属性**（复数形式）：

• 该属性返回一个二进制掩码，表示当前所有处于按下状态的按键组合
• 通过位运算可以判断具体哪些按键被按下

示例代码 #

window.addEventListener('pointerdown', (e) => {
  console.log('pointerdown', e.pointerId, e.pointerType, e.button, '当前按键掩码:', e.buttons)
})
window.addEventListener('pointerup', (e) => {
  console.log('pointerup', e.pointerId, e.pointerType, e.button, '当前按键掩码:', e.buttons)
})
window.addEventListener('pointermove', (e) => {
  // 解析当前所有按下的按键
  const pressed = []
  if (e.buttons & 1) pressed.push('左键(0)')
  if (e.buttons & 2) pressed.push('右键(1)')
  if (e.buttons & 4) pressed.push('中键(2)')
  
  if (pressed.length) {
    console.log('当前按下按键:', pressed.join(', '))
    // 这里可以加入你的业务逻辑：比如同时按下中键+左键时执行平移+选择
    if (e.buttons === 5) { // 0b101 = 左键+中键
      // 执行平移+选择逻辑
    }
  }
})

// 保留鼠标事件作为对比参考
window.addEventListener('mousedown', (e) => {
  console.log('mousedown', e.button)
})
window.addEventListener('mouseup', (e) => {
  console.log('mouseup', e.button)
})

内容的提问来源于stack exchange，提问作者CoderPi