Firefox Mousemove event.which

Question

Я пишу приложение для рисования на холсте HTML5, и мне нужно знать, нажата ли левая кнопка мыши во время события перемещения мыши. На Chrome это работает:

if (event.which == 1) { <do stuff> }

Но в FireFox, event.which всегда равен 1, независимо от того, нажата кнопка или нет.

Как определить, нажата ли кнопка мыши во время события перемещения мыши?

Answer 1

Короче, ты не можешь.MDN, например, объясняет :

Когда происходит событие кнопки мыши, доступен ряд дополнительных свойств, чтобы определить, какие кнопки мыши были нажаты, и расположение указателя мыши.,Свойство кнопки события можно использовать для определения, какая кнопка была нажата, где возможные значения: 0 для левой кнопки, 1 для средней кнопки и 2 для правой кнопки.Если вы настроили мышь по-разному, эти значения могут отличаться.

...

Свойства кнопки и сведений применяются только к событиям, связанным с кнопкой мыши, а не к событиям перемещения мыши.Например, для события mousemove оба свойства будут установлены в 0.

Если вы хотите, вы можете установить глобальные обработчики mousedown и mouseup, которые устанавливают флаги соответствующим образом, а затем в любой заданный момент.момент времени вы можете с относительной степенью точности определить, была ли нажата какая-либо кнопка мыши.

Answer 2

Вы должны использовать переменную для хранения состояния mousedown. Когда вы mousedown на холсте задаете значение true, а когда вы mouseup на документе задаете значение false ..

Таким образом, он будет очищен, где бы вы ни щелкнули ..

Как то так

var isMouseDown = false;

var draw = document.getElementById('draw');

document.addEventListener('mouseup',
                          function(){
                              isMouseDown = false;
                          },
                          false);

draw.addEventListener('mousedown',
                      function(e){
                          e.preventDefault(); // cancel element drag..
                          isMouseDown = true;
                      },
                      false);

draw.addEventListener('mousemove',
                      function(e){
                          if (isMouseDown){
                              // do the drawing ..
                          }
                      },
                      false);

Демо на http://jsfiddle.net/gaby/8JbaX/

Answer 3

На самом деле, вы можете проверить event.buttons в Firefox, который сообщает вам, нажата ли левая кнопка, правая кнопка или нет.Вам понадобится оператор if, чтобы отличаться от Chrome, у которого нет event.buttons.

Answer 4

Я использую это псевдополифиллы, чтобы избежать проблем с FireFox mouseMove:

function fixWhich(e) {
    if (!e.which && e.button) { // if no which, but button (IE8-)
        if (e.button & 1)
            e.which = 1; // left
        else if (e.button & 4)
            e.which = 2; // middle
        else if (e.button & 2)
            e.which = 3; // right

    }
    if (e.buttons) { //if there's buttons, i set new option buttondown (FF)
        if (e.buttons & 1)
            e.buttondown = 1; // left
        else if (e.buttons & 4)
            e.buttondown = 2; // middle
        else if (e.buttons & 2)
            e.buttondown = 3; // right

    }
}

Я называю это "псевдо", потому что это заставляет меня нажимать кнопку при перемещении таким образом:

if (e.buttondown === 1) {
        //do anything
    }

Вместо обычного:

if (e.which === 1) {
       //do anything
    }