Detecting Left and Right Mouse Events for a Canvas Game

Question

I want to implement a canvas minesweeper game using plain javascript. I use 2D array for my grid. For the game, I need to detect right and left mouse clicks, each of which will do different things. My research directed me towards mousedown, mouseup, contextmenu, however, my code does not seem to work, as for the right click it does the functions for both right and left click,because the mouseup event gets triggered for the right click as well. Can anyone help me understand how to distinguish between the two? I ran into examples of event.which, where left click is event.which === 0, and the right click is event.which === 2, but that works only for buttons, as far as I understood. Here is the code.

 canvas.addEventListener('mouseup', function(evt) {
    let x1 = Math.floor(evt.offsetX/(canvas.height/rows));
    let y1 = Math.floor(evt.offsetY/(canvas.width/cols));
    draw (y1, x1); //this is my drawing functions (draws the numbers, bombs)

}, false); 

canvas.addEventListener('contextmenu', function(evt) {
    let j = Math.floor(evt.offsetX/(canvas.height/rows));
    let i = Math.floor(evt.offsetY/(canvas.width/cols));

    ctx.drawImage(flagpic, j*widthCell+5, i*widthCell+2, widthCell-9, 
    widthCell-5); //draws the flag where right mouse clicked

}, false);

Answer 1

Use click event for left click:

canvas.addEventListener('click', function(evt) { // No right click

And use contextmenu for right click: (Right click from keyboard context menu, also allowing you mouse right click)

canvas.addEventListener('contextmenu', function(evt) { // Right click

You need to call evt.preventDefault() as well for preventing the default action.

---

For your context, if you wanted to use mousedown or mouseup events, then you can use event.button to detect the clicked button was left:

canvas.addEventListener('mousedown', function(evt) {
  if(evt.button == 0) {
    // left click
  }

Here's the button click values:

left button=0, 
middle button=1 (if present),
right button=2

You can look on the example shown in the following link for greater details:

MouseEvent.button

<script>
var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                console.log('Left button clicked.');
            break;

            case 1:
                console.log('Middle button clicked.');
            break;

            case 2:
                console.log('Right button clicked.');
            break;

            default:
                console.log('Unexpected code: ' + btnCode);
        }
    }
}
</script>

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">
    Click with mouse...
</button>