如何使用javascript MouseEvents同时左右点击鼠标中键不同点击？

例子：如何使用javascript MouseEvents同时左右点击鼠标中键不同点击？

document.querySelector("body").addEventListener("mousedown", (e) => console.log(e.button, e.buttons));

如果你把在浏览器的控制台... 中间点击日志1,4和左，右按键，同时记录1,4太多。

浏览器是否会反弹点击并报告它们的延迟？我怎样才能区分这两件事？

来源

2017-07-31 Rodrigo Alfonso

我不认为鼠标事件经过深思熟虑非常好。 “左”和“右”按钮的概念是不恰当的，应该是“初级”，“次级”等等。我从CAD电脑开始使用我们所谓的光标（类似于鼠标，但用于高精度数字化），上面有9个按钮。我认为你能做的最好的是[* button *]（https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button）属性，它返回一个从0到4的值（但检查支持，这是不一致的）。 – RobG

var buttonsMap = { 
    1 : "primary", 
    2 : "contextmenu", 
    3 : "primary + contextmenu", 
    4 : "middle", 
    5 : "primary + middle", 
    6 : "contextmenu + middle" 
} 


document.body.addEventListener("mousedown", (e) => { 

    console.log(buttonsMap[e.buttons]); // Here you go 

    // What you could do: 
    if(/3|5|6/.test(e.buttons)) { 
    console.log("DOUBLE!!!"); 
    } else { 
    console.log("single"); 
    } 

});

jsBin demo

https://w3c.github.io/uievents/#dom-mouseevent-buttons

来源

2017-07-31 23:37:06

仅有代码的答案没有帮助。您应该包含相关资源的链接，例如[* W3C UI Events spec *]（https://w3c.github.io/uievents/#widl-MouseEvent-buttons）和[* MDN MouseEvent.buttons *]（https：/ /developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons）。 0在哪里？ – RobG

如何使用javascript MouseEvents同时左右点击鼠标中键不同点击？

回答

相关问题