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);

Villa

Possible duplicate of Is right click a Javascript event? – Undertone

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>

Sorcim

contextmenu and right click are two distinct, and not related events. contextmenu can be triggered from some keyboards, from some combination of mouse+key and probably from other means. – Strobe

Answer 2

Try this might work for you

document.getElementById("mydiv").onmousedown = function(event) {
 myfns(event)
};

var myfns = function(e) {

  var e = e || window.event;
  var btnCode;

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

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

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

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

    }
  }
}

<div id="mydiv">Click with mouse...</div>

Reference

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

Sherellsherer

Ah no... I meant please use addEventListener instead of <div onXXX="uglyJS">. And it was good to prevent the default behavior of contextmenu. – Strobe