如何通过JavaScript获取鼠标的状态

Question

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

我知道你可以用mousedown维护一个变量判断是否按下

但是mouseup在disabled元素上，没办法设置state为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 这将阻止按钮响应，而且您仍然能够获得鼠标事件

如何通过JavaScript获取鼠标的状态

How to get the state of the mouse through JavaScript

javascript

html

dom

browser

mouseevent