Firefox Mousemove event.which
Я пишу приложение для рисования холста HTML5, и мне нужно узнать, нажата ли левая кнопка мыши во время события mousemove. В Chrome это работает:
if (event.which == 1) { <do stuff> }
Но в FireFox, event.which всегда равно 1, независимо от того, нажата ли кнопка.
Как определить, нажата ли кнопка мыши во время события mousemove?
Ответы
Ответ 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
}