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

【问题标题】：How to get the state of the mouse through JavaScript如何通过 JavaScript 获取鼠标的状态
【发布时间】：2020-09-19 10:00:34
【问题描述】：

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

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

但是当 mouseup 在禁用元素上时，没有办法将状态设置为 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)
    })

【问题讨论】：

标签： javascript html dom browser mouseevent

【解决方案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')
});

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

【讨论】：