如何通过JavaScript获取鼠标状态

Question

我想获取是否按下了当前鼠标，例如右键。

我知道您可以使用mousedown来维护变量以确定是否已按下它。

但是当将鼠标悬停在禁用的元素上时，无法将状态设置为up，这会导致随后的状态错误。

是否有API可以帮助我获取当前的鼠标状态？

示例

  <button disabled>disabled</button>

    let state = 'up'
    document.addEventListener('mousedown', () => {
      state = 'down'
      console.log('mouseDown')
    })
    document.addEventListener('mouseup', () => {
      state = 'up'
      console.log('mouseup')
    })
    document.addEventListener('mousemove', () => {
      console.log('mousemove',state)
    })

Answer 1

根据HTML规范禁用的表单控件必须阻止在用户交互任务源上排队的任何单击事件在元素上分派。

因此您可以使用捕获指针事件来破解行为给你的按钮一个id，例如：“ mybutton”

button=document.getElementById('mybutton')
button.addEventListener('click',()=>{
console.log('click')
})


button.addEventListener('pointerdown', event => {
    console.log('down')

});

button.addEventListener('pointerup', event => {
  console.log('up')
});

或删除禁用的属性并使用css pointer-events: none，这将阻止按钮响应，而且您仍然可以获取鼠标事件