Определите события мыши во время requestPointerLock

Есть ли способ идентифицировать событие правого клика ("contextmenu") и события прокрутки, пока включен API блокировки указателя? Я пытаюсь создать основанную на браузере 3d-игру, в которой игрок сможет выполнять различные действия, щелкая левой кнопкой мыши, щелкая правой кнопкой мыши, щелкая средней кнопкой мыши и прокручивая - когда указатель заблокирован.

index.html

<body><button id="lock">Start game</button</body>

app.js

$("#lock").on("click", function(e) {
  lockPointer(); // invokes the requestPointerLock API
  e.stopPropagation();
});

// this works perfectly
$("body").on("click", function(e) {
  // do stuff on left click
});

// this does not work
$("body").on("contextmenu", function(e) {
  // do stuff on right click
});

1 ответ

Решение

Для правого клика вы можете использовать mousedown или же mouseup событие, это работает с requestPointerLock

$('body').on('mousedown', function(e) {
    if (e.which === 1) {
        // left button
    } else if (e.which === 2) {
        // middle button
    } else if (e.which === 3) {
        // right button
    }
});

Для прокрутки вы можете использовать wheel событие:

$('body').on('wheel', function(e) {
    var dx = e.originalEvent.deltaX;
    var dy = e.originalEvent.deltaY;

    if (dy < 0) {
        // scroll up
    } else if (dy > 0) {
        // scroll down
    }

    if (dx < 0) {
        // scroll left (some mice support this)
    } else if (dx > 0) {
        // scroll right (some mice support this)
    }
});
Другие вопросы по тегам