JavaScript左右点击功能

Question

这是我正在制作的 HTML5 canvas 游戏。在游戏中，有一个 Angular 色有一把枪，他可以射击并装弹。我希望玩家使用鼠标左键进行射击，使用鼠标右键进行装弹。

我需要的是，每当我单击鼠标左键时，播放器对象 (Player1.isLeftClick) 中的一个变量变为真，而当我松开按钮时，同一变量变为假。鼠标右键也应该发生同样的事情，但使用另一个变量(Player1.isRightClick)。我还希望它能够支持所有最流行的浏览器(Chrome、Firefox、Explorer 等)。 我还必须使用纯 JavaScript，没有像 jQuery 这样的库!我已经通过键盘事件实现了这一点，但我需要通过鼠标事件实现这一点。

如果有帮助，我已经有了用于键盘上下移动和鼠标移动的事件处理程序。这些是在加载图像时初始化游戏的 init 函数中创建的。

document.addEventListener('mousemove', mousePos, false);
document.addEventListener('keydown', checkKeyDown, false);
document.addEventListener('keyup', checkKeyUp, false); 

我还有一个名为 mie 的变量，如果使用的浏览器是 Internet Explorer，则该变量为 true，对于其他浏览器则为 false。

Answer 1

您想使用 e.button属性来检查调用了哪个鼠标事件。单击鼠标左键的值为different in IE。 .您的代码将如下所示:

var left, right;
left = mie ? 1 : 0;
right = 2;

document.body.addEventListener('mousedown', function (e){
    if(e.button === left){
        Player1.isLeftClick = true;
    }
    else if(e.button === right){
        Player1.isRightClick = true;
    }
}, false);

document.body.addEventListener('mouseup', function (e){
    if(e.button === left){
        Player1.isLeftClick = false;
    }
    else if(e.button === right){
        Player1.isRightClick = false;
    }
}, false);

Demo