Подтвердить что ты не робот

Firefox Mousemove event.which

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

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

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

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

4b9b3361

Ответ 1

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

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

...

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

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

Ответ 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/

Ответ 3

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

Ответ 4

Я использую этот псевдо- polyfill, чтобы избежать проблем с 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 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
    }