Как отличить левый и правый клик мыши с помощью jQuery

Правка: Я изменил код, чтобы он работал с динамически добавляемыми элементами, используя .on() в jQuery 1.7 и выше:

$(document).on("contextmenu", ".element", function(e){
   alert('Событие контекстного меню сработало!');
   return false;
});

Демо: http://jsfiddle.net/Kn9s7/5

[Начало оригинального поста] Вот что сработало для меня:

$('.element').bind("contextmenu",function(e){
   alert('Событие контекстного меню сработало!');
   return false;
}); 

На случай, если вам интересны несколько решений ^^

Правка: Тим Даун поднимает хороший вопрос о том, что событие contextmenu может сработать не только при правом клике, но и когда нажата клавиша контекстного меню (что можно считать заменой правому клику).

Вы можете легко определить, какая кнопка мыши была нажата, проверяя свойство which объекта события на событиях мыши:

/*
  1 = Левая   кнопка мыши
  2 = Средняя  кнопка мыши
  3 = Правая  кнопка мыши
*/

$([селектор]).mousedown(function(e) {
    if (e.which === 3) {
        /* Была нажата правая кнопка мыши! */
    }
});

Такой подход позволяет вам реализовать разные действия в зависимости от нажатой кнопки мыши.

Если вы хотите обработать события нажатия кнопок мыши с использованием jQuery, то вместо устаревшего метода .live(), который больше не поддерживается, вам следует использовать метод .on(). Ниже приведен актуализированный код для обработки нажатий левой, средней и правой кнопок мыши, с соответствующими изменениями стилей для целевого элемента:

var $log = $("div.log");
$("div.target").on("mousedown", function(event) {
  $log.text("Which: " + event.which);
  if (event.which === 1) {
    $(this).removeClass("right middle").addClass("left");
  } else if (event.which === 2) {
    $(this).removeClass("left right").addClass("middle");
  } else if (event.which === 3) {
    $(this).removeClass("left middle").addClass("right");
  }
});

Этот код отслеживает событие mousedown на элементе с классом .target. В зависимости от нажатой кнопки мыши (левая - event.which === 1, средняя - event.which === 2, правая - event.which === 3), код меняет класс элемента и обновляет текст в элементе с классом .log.

В CSS-коде вы определяете стили для различных состояний целевого элемента:

div.target {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

div.target.left {
  background-color: #0faf3d; /* Зеленый для левой кнопки */
}

div.target.right {
  background-color: #f093df; /* Розовый для правой кнопки */
}

div.target.middle {
  background-color: #00afd3; /* Голубой для средней кнопки */
}

div.log {
  text-align: left;
  color: #f00; /* Красный текст для логирования */
}

Не забудьте подключить jQuery перед тем, как использовать его:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>

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

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

$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

$(document).on("rightclick", "div", function() {
    console.log("hello");
    return false;
});

В этом коде мы определяем специальное событие rightclick, которое связано с событием contextmenu. Затем мы устанавливаем обработчик этого события для всех элементов <div>, который выводит сообщение "hello" в консоль и предотвращает появление стандартного контекстного меню.

Вы можете протестировать это в данном jsFiddle.

Не забудьте, что для использования данного кода вам потребуется подключить jQuery к вашей странице, чтобы обработчики событий работали корректно.

Существует множество очень хороших ответов на этот вопрос, однако я хотел бы остановиться на одной ключевой разнице между IE9 и IE < 9 при использовании event.button.

Согласно старой спецификации Microsoft для event.button, коды сильно отличаются от тех, что использует W3C. W3C рассматривает лишь три случая:

1. Нажата левая кнопка мыши - event.button === 1
2. Нажата правая кнопка мыши - event.button === 3
3. Нажата средняя кнопка мыши - event.button === 2

В старых версиях Internet Explorer Microsoft использовала битовую интерпретацию для нажимаемой кнопки, что привело к 8 возможным случаям:

1. Никакая кнопка не нажата - event.button === 0 или 000
2. Нажата левая кнопка - event.button === 1 или 001
3. Нажата правая кнопка - event.button === 2 или 010
4. Нажаты левая и правая кнопки - event.button === 3 или 011
5. Нажата средняя кнопка - event.button === 4 или 100
6. Нажаты средняя и левая кнопки - event.button === 5 или 101
7. Нажаты средняя и правая кнопки - event.button === 6 или 110
8. Нажаты все три кнопки - event.button === 7 или 111

Несмотря на то что теоретически это должно работать, ни одна версия Internet Explorer никогда не поддерживала случаи, когда одновременно нажато две или три кнопки. Я упоминаю это, потому что стандарт W3C даже теоретически не может поддерживать такую возможность.