Обнаружение событий левой и правой мыши для игры на холсте

Я хочу реализовать игру Canvas сапера, используя простой javascript. Я использую 2D-массив для своей сетки. Для игры мне нужно обнаруживать щелчки правой и левой кнопкой мыши, каждый из которых будет делать разные вещи. Мое исследование направило меня на mousedown, mouseup, contextmenu, однако мой код, похоже, не работает, поскольку для щелчка правой кнопкой мыши он выполняет функции как для правого, так и для левого щелчка, потому что событие mouseup также запускается для правого щелчка. Может ли кто-нибудь помочь мне понять, как различать эти два? Я встречал примеры event.which, где левый щелчок - event.which === 0, а правый - event.which === 2, но, насколько я понял, это работает только для кнопок. Вот код.

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

javascript canvas html mouseup mouseevent
person nkarmyan    schedule 10.12.2017    source источник
comment
Возможный дубликат Щелкните правой кнопкой мыши событие Javascript?   -  person Tigger    schedule 10.12.2017

Ответы (2)


arrow_upward
12
arrow_downward

Используйте событие click для щелчка левой кнопкой мыши:

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

И используйте contextmenu для щелчка правой кнопкой мыши: (щелкните правой кнопкой мыши из контекстного меню клавиатуры, также позволяя щелкнуть правой кнопкой мыши)

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

Вам также необходимо вызвать evt.preventDefault(), чтобы предотвратить действие по умолчанию.

В вашем контексте, если вы хотите использовать события mousedown или mouseup, вы можете использовать event.button, чтобы определить, была ли оставлена ​​нажатая кнопка:

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

Вот значения нажатия кнопки:

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

Вы можете посмотреть пример, показанный по следующей ссылке, для получения более подробной информации:

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>
person Bhojendra Rauniyar    schedule 10.12.2017
comment
contextmenu и щелчок правой кнопкой мыши - это два разных и не связанных события. contextmenu можно запускать с некоторых клавиатур, с помощью некоторой комбинации «мышь + клавиша» и, возможно, другими способами. - person Kaiido; 10.12.2017

arrow_upward
3
arrow_downward

Попробуйте, это может сработать для вас

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>

Ссылка

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

person Nisal Edu    schedule 10.12.2017
comment
Ах нет ... Я имел в виду, пожалуйста, используйте addEventListener вместо <div onXXX="uglyJS">. И было хорошо предотвратить поведение контекстного меню по умолчанию. - person Kaiido; 10.12.2017