html5 left,html5 canvas - JavaScript left and right click function

这篇博客将介绍如何在HTML5 Canvas游戏中使用纯JavaScript为角色添加左键射击和右键重载功能。玩家通过左键点击开始射击，释放时停止，同时设置Player1.isLeftClick变量进行状态跟踪。同样，右键点击用于重载，变量Player1.isRightClick对应相应状态。博客内容涵盖了不同浏览器的兼容性问题，特别是针对Internet Explorer的处理，并且已经具备键盘事件监听的基础，现在需要将其扩展到鼠标事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

This is for an HTML5 canvas game that I am making. In the game, there is a character that has a gun, he can shoot it and reload it. I would like the player to use the left mouse button for shooting and the right mouse button for reloading.

What I need is that when ever I click the left mouse button, a variable in my player object(Player1.isLeftClick) becomes true, and when I let go of the button the same variable becomes false. The same thing should also happen with the right mouse button, but with another variable(Player1.isRightClick). I also want it to be capable with all the most popular browsers(Chrome, Firefox, Explorer, etc.). I must also be in pure JavaScript with no libraries like jQuery!

I already achieved this with keyboard events, but I need this with the mouse events.

If it helps, I already have event handlers for keyboard up and down and mouse movement. These are made in the init function that initializes the game when the images are loaded.

document.addEventListener('mousemove', mousePos, false);

document.addEventListener('keydown', checkKeyDown, false);

document.addEventListener('keyup', checkKeyUp, false);

I also have variable called mie that is true if the used browser is Internet Explorer and false for other browsers.

html5 left,html5 canvas - JavaScript left and right click function - Stack Overflow