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

Question

Как получить нажатие кнопки мыши с помощью jQuery?

$('div').bind('click', function(){
    alert('clicked');
});

это вызвано как правым, так и левым щелчком, как можно поймать правый щелчок мыши? Я был бы счастлив, если бы существовало что-то вроде ниже:

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

Answer 1

Начиная с версии jQuery 1.1.3, event.which нормализует event.keyCode и event.charCode, поэтому вам не нужно беспокоиться о проблемах совместимости браузера. Документация по event.which

event.which даст 1, 2 или 3 для левой, средней и правой кнопок мыши, соответственно:

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});

Answer 2

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

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

Демонстрация: jsfiddle.net / Kn9s7 / 5

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

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

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

Редактировать : Тим Даун замечает, что это не всегда будет right-click, который запускает событие contextmenu, но также и при нажатии клавиши контекстного меню (что, возможно, замена для right-click)

Answer 3

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

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});

Answer 4

Вы также можете bind до contextmenu и return false:

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

Демо: http://jsfiddle.net/maniator/WS9S2/

Или вы можете сделать быстрый плагин, который делает то же самое:

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

Демо: http://jsfiddle.net/maniator/WS9S2/2/

---

Использование .on(...) jQuery> = 1,7:

$(document).on("contextmenu", "selector", function(e){
    e.preventDefault();
    //code
    return false;
});  //does not have to use `document`, it could be any container element.

Демо: http://jsfiddle.net/maniator/WS9S2/283/

Answer 5

$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

Обновление для текущего состояния вещей:

var $log = $("div.log");
$("div.target").on("mousedown", function() {
  $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");
  }
});

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;
}

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

Answer 6

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

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

http://jsfiddle.net/SRX3y/8/

Answer 7

Есть много очень хороших ответов, но я просто хочу коснуться одного существенного различия между IE9 и IE <9 при использовании <code>event.button.

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

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. Нажаты все 3 кнопки - event.button === 7 или 111

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

Answer 8

Мне кажется, что небольшая адаптация ответа TheVillageIdiot будет чище:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

EDIT: JQuery предоставляет атрибут e.which, возвращая 1, 2, 3 для левого, среднего и правого щелчка соответственно. Таким образом, вы также можете использовать if (e.which == 3) { alert("right click"); }

См. Также: ответы на «Запуск события onclick с помощью среднего щелчка»

Answer 9

event.which === 1 обеспечивает щелчок левой кнопкой мыши (при использовании jQuery).

Но вы также должны подумать о клавишах-модификаторах: ctrl cmd shift alt

Если вы заинтересованы только в ловле простых, неизмененных левых кликов, вы можете сделать что-то вроде этого:

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});

Answer 10

$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});