Question

在javascript中捕获鼠标左键和鼠标右键的最佳方法是什么？我没有使用jQuery（它是我的学习列表中的下一个），现在只是javascript。基本上，我想做像

这样的事情

 onClick()=javascript:rightClickFunction() // do right click function
 onContextMenu()=javascript:leftClickFunction() /
 onBoth() ???

我唯一能在stackoverflow上找到的是： How to distinguish between left and right mouse click with jQuery

我应该如何捕获双击按钮？我可以检查在R和L按钮例程期间是否还单击了相反的按钮吗？

Answer 1

您可以使用以下某些布尔变量跟踪哪些鼠标按钮停止：

var leftButtonDown = false;
var rightButtonDown = false;

$(document).mousedown(function() {
    if(e.which == 1) {
        leftButtonDown = true;
    } else if (e.which == 3) {
        rightButtonDown = true;
    }
});

$(document).mouseup(function() {
    if(e.which == 1) {
        leftButtonDown = false;
    } else if (e.which == 3) {
        rightButtonDown = false;
    }
});

$(document).click(function() {
    if(leftButtonDown && rightButtonDown) {
        // left and right buttons are clicked at the same time
    }
});

如果两个布尔值均为真，则同时单击鼠标左键和左键。

Answer 2

基于Elliot answer的纯Javascript解决方案：

var leftButtonDown = false;
var rightButtonDown = false;

document.addEventListener("mousedown", function () {
    if (e.which == 1) {
        leftButtonDown = true;
    } else if (e.which == 3) {
        rightButtonDown = true;
    }
});

document.addEventListener("mouseup", function () {
    if (e.which == 1) {
        leftButtonDown = false;
    } else if (e.which == 3) {
        rightButtonDown = false;
    }
});

document.addEventListener("click", function () {
    if (leftButtonDown && rightButtonDown) {
        // Click with both LMB and RMB.
    }
});

Answer 3

对于仍然对最近答案感兴趣的任何人（不建议使用event。），您可以将以下代码与ES6语法一起使用。

let leftButtonDown = false;
let rightButtonDown = false;

document.addEventListener("mousedown", (e) => {
    // left click
    if (e.button === 0) {
        leftButtonDown = true;
    }
    // right click
    if (e.button === 2) {
        rightButtonDown = true;
    }
    if (leftButtonDown && rightButtonDown) {
        // insert code here
    }
});

document.addEventListener("mouseup", (e) => {
    if (e.button === 0) {
        leftButtonDown = false;
    }
    if (e.button === 2) {
        rightButtonDown = false;
    }
});

如果要阻止弹出上下文菜单，可以尝试以下操作：

let leftButtonDown = false;
let rightButtonDown = false;

document.addEventListener("mousedown", (e) => {
    // left click
    if (e.button === 0) {
        leftButtonDown = true;
    }
    // right click
    if (e.button === 2) {
        rightButtonDown = true;
    }
    if (leftButtonDown && rightButtonDown) {
        // insert code here
    }
});

document.addEventListener("mouseup", (e) => {
    if (e.button === 0) {
        leftButtonDown = false;
    }
});

document.addEventListener("contextmenu", (e) => {
    if (leftButtonDown && rightButtonDown) {
        e.preventDefault();
    }
    rightButtonDown = false;
});

现代浏览器的鼠标按钮映射：

左键= 0
中间点击= 1
右键单击= 2

IE8和更早的鼠标按钮映射：

左键= 1
中间点击= 4
右键单击= 2

在javascript中同时捕获鼠标左键和右键

3 个答案: