Обнаружить нажатие левой кнопки мыши - PullRequest
Новая
       15

Обнаружить нажатие левой кнопки мыши

31 голосов
/ 15 октября 2010

Я ненавижу этот беспорядок с кнопками мыши, созданными W3C MS!Я хочу знать, нажата ли левая кнопка мыши, когда я получаю событие mousedown.

Я использую этот код 

// Return true if evt carries left mouse button press
function detectLeftButton(evt) {
  // W3C
  if (window.event == null) {
    return (evt.button == 0)
  }
  // IE
  else {
    return (evt.button == 1);
  }
}

Однако он не работает в Opera и Chrome, потому что так получается, что там тоже существует window.event.

Так что жемне делать?У меня есть какое-то обнаружение браузера, но мы все знаем, что нельзя полагаться на все маски, которые делают некоторые браузеры в последнее время.Как мне обнаружить левую кнопку мыши НАДЕЖНО?

Ответы [ 5 ]

41 голосов
/ 15 октября 2010

Обновлен ответ. Следующее будет определять, нажата ли левая и только левая кнопки мыши: 

function detectLeftButton(evt) {
    evt = evt || window.event;
    if ("buttons" in evt) {
        return evt.buttons == 1;
    }
    var button = evt.which || evt.button;
    return button == 1;
}

Для получения дополнительной информации об обработке событий мыши в JavaScript, попробуйте http://unixpapa.com/js/mouse.html

10 голосов
/ 05 октября 2012

В настоящее время существует стандарт W3C event.buttons, поддерживаемый IE9 в стандартном режиме и Gecko 15 + .

W3C полностью заполнил свойством event.button, поэтому для совместимого со стандартом браузера event.button равен 0, но для браузеров, созданных до стандартного, event.button равен 1.

Поэтому код должен избегать использования event.button, за исключением старых браузеров. Следующий код должен работать: 

function detectLeftButton(event) {
    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
        return false;
    } else if ('buttons' in event) {
        return event.buttons === 1;
    } else if ('which' in event) {
        return event.which === 1;
    } else {
        return (event.button == 1 || event.type == 'click');
    }
}
0 голосов
/ 17 сентября 2015 
// 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses

var buttonsArray = [false, false, false, false, false, false, false, false, false];
var mousePressed = false;

document.onmousedown = function(e) {
    buttonsArray[e.button] = true;
    mousePressed = true;
};

document.onmouseup = function(e) {
    buttonsArray[e.button] = false;
    mousePressed = false;
};

document.oncontextmenu = function() {
    return false;
}

Объяснение: Когда мышь не работает, мы меняем значение true на нажатую кнопку в нашем массиве кнопок. Когда мышь поднята, мы изменяем на ложь нажатой кнопки на ложь.

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

Для упрощения мы можем добавить еще одну переменную mousePressed и пометить, если мышь нажата или нажата.

Прекрасно работает на Chrome, я не тестировал его в другом браузере, но я думаю, что это нормально в Firefox и Opera тоже ... IE ??? Мне все равно, IE.

Наслаждайся этим!

0 голосов
/ 23 июля 2015

Хотя event.buttons теперь работают в Chrome, Safari по-прежнему не поддерживает его.Одним из обходных путей является использование событий onmousedown и onmouseup на уровне документа или родителя, например: onmousedown = "bMouseDown = true" onmouseup = "bMouseDown = false"

0 голосов
/ 17 октября 2013

Вы можете использовать следующий код- 

onmouseup="if(window.event.which==1){//code for left click}
           else if(window.event.which==3){//code for right click}"
...