Является ли правый клик событием Javascript?


173

Является ли правый клик событием Javascript? Если да, то как мне его использовать?

Ответы:


188

Как уже упоминалось, правая кнопка мыши может быть обнаружена с помощью обычных событий мыши (mousedown, mouseup, click) . Однако, если вы ищете стрельбу, когда вызывается меню, вызываемое правой кнопкой мыши, вы ищете не в том месте. Правое нажатие / контекстное меню также доступно через клавиатуру (Shift + F10 или клавиша контекстного меню в Windows и некоторых Linux). В этой ситуации искомое событие oncontextmenu:

window.oncontextmenu = function ()
{
    showCustomMenu();
    return false;     // cancel default menu
}

Что касается самих событий мыши, браузеры устанавливают свойство для объекта события, доступное из функции обработки событий:

document.body.onclick = function (e) {
    var isRightMB;
    e = e || window.event;

    if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
        isRightMB = e.which == 3; 
    else if ("button" in e)  // IE, Opera 
        isRightMB = e.button == 2; 

    alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
} 

window.oncontextmenu - MDC


5
Так же, как и с вопросом о кнопке /, «oncontextmenu» не реализовано одинаково во всех браузерах ... см. Quirksmode.org/dom/events/contextmenu.html для некоторых « приобретенных ошибок ».
smencer

3
@AndyE Привет, Энди, выражение (isRightMB?"was not" : "")должно быть (isRightMB?"was" : "was not"). Правильно ? Пожалуйста, помогите, чтобы рассмотреть это.
Joe.wang

1
@Joe: забавно, как это подняло 32 голоса и 4 года, и никто не заметил ;-) Я думаю, что меня можно извинить, хотя - это было в 00:30, когда я написал ответ!
Энди Э,

1
Имейте в виду, что на Mac FF Ctrl + правый клик будет проходить как щелчок левой кнопкой мыши (e.which === 1), в то время как на Mac Chrome ctrl + правый клик будет проходить как ожидаемый щелчок правой кнопкой мыши (e.ctrlKey && e . который === 3).
ND

8
В Chrome 59 правая кнопка мыши срабатывает onmousedownи onmouseup, но не onclick. Видимо, в Chrome onclickсрабатывает только левая кнопка мыши. (да , ребята, я проверил это несколько раз) для обнаружения правой кнопки мыши кнопкой мыши, вы должны либо объединить onmousedownи onmouseup, или использование oncontextmenu.
Venryx

27

взгляните на следующий код jQuery:

$("#myId").mousedown(function(ev){
      if(ev.which == 3)
      {
            alert("Right mouse button clicked on element with id myId");
      }
});

Значение whichбудет:

  • 1 для левой кнопки
  • 2 для средней кнопки
  • 3 для правой кнопки

2
Э-э-э, это ужасно! Почему .whichне так же, как .button? Оо .button=> 0,1,2 ; which=> 1,2,3 . это просто неправильно.
Бен Филипп

11

Вы можете использовать событие window.oncontextmenu, например:

window.oncontextmenu = function () {
  alert('Right Click')
}
<h1>Please Right Click here!</h1>


это также стреляет левый мб
Алекс

Круто +1, теперь как заблокировать контекстное меню? @ user12345678
Шаян,

2
@Shayan e.preventDefault ()
Брайан Аллан Уэст

@BrianAllanWest Это jQuery? Я не знаю, как это использовать. window.oncontextmenu = function () { e.preventDefault() }не работал
Шаян

2
@Shayan, нет, это необработанный javascript ... вы бы использовали его следующим образом ... window.oncontextmenu = function (e) {e.preventDefault ();} это предотвращает поведение браузера по умолчанию при контекстном меню (то есть: нажатие правой кнопки мыши или удержание на Mac).
Брайан Аллан Вест

6

Да, хотя w3c говорит, что событие click может обнаружить правый клик, onClick не запускается через правый клик в обычных браузерах.

Фактически, щелчок правой кнопкой мыши вызывает только onMouseDown onMouseUp и onContextMenu.

Таким образом, вы можете рассматривать «onContextMenu» как событие правого клика. Это стандарт HTML5.0.


1
Да, звучит как отличное решение, особенно если вы ориентируетесь на новые браузеры. Я не думаю, что это только HTML5.0, потому что даже IE 5.5 поддерживает его для элементов! Вот больше о том, какие браузеры поддерживают это: quirksmode.org/dom/events/contextmenu.html
Ignas2526

5

Если вы хотите обнаружить щелчок правой кнопкой мыши, не следует использовать MouseEvent.whichсвойство, так как оно нестандартное и большая несовместимость между браузерами. (см. MDN ) Вы должны вместо этого использовать MouseEvent.button. Возвращает число, представляющее данную кнопку:

  • 0: Нажата основная кнопка, обычно левая кнопка или неинициализированное состояние
  • 1: Нажата вспомогательная кнопка, обычно кнопка колеса или средняя кнопка (если имеется)
  • 2: Нажата дополнительная кнопка, обычно правая
  • 3: Четвертая кнопка, обычно кнопка «Назад» в браузере
  • 4: Пятая кнопка, обычно кнопка браузера вперед

MouseEvent.button обрабатывает больше типов ввода, чем обычная мышь:

Кнопки могут быть настроены иначе, чем стандартная схема «слева направо». У мыши, настроенной для использования левой рукой, действия кнопок могут быть отменены. Некоторые указательные устройства имеют только одну кнопку и используют клавиатуру или другие механизмы ввода для обозначения основного, дополнительного, вспомогательного и т. Д. Другие могут иметь множество кнопок, сопоставленных с различными функциями и значениями кнопок.

Ссылка:

  1. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
  2. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

Жаль, что это был первый ответ, который я увидел при поиске
Гуннар Мар Оттарссон

3

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


@ Брайан: щелчок правой кнопкой мыши onmousedown, onmouseupи onclick. Однако, если вы хотите переопределить меню, вызываемое правой кнопкой мыши, вам не следует использовать эти события (см. Мой ответ ниже).
Энди Э

2

Следующий код использует jQuery для генерации пользовательского rightclickсобытия на основе событий по умолчанию mousedownи mouseupсобытий. Он учитывает следующие моменты:

  • триггер при наведении мыши
  • запуск только при нажатии mousedown на том же элементе перед
  • этот код особенно работает в JFX Webview (так как contextmenuсобытие там не вызывается)
  • это не срабатывает , когда ключ ContextMenu на клавиатуре нажимается (например , решение с on('contextmenu', ...)делает

$(function ()
{ // global rightclick handler - trigger custom event "rightclick"
	var mouseDownElements = [];
	$(document).on('mousedown', '*', function(event)
	{
		if (event.which == 3)
		{
			mouseDownElements.push(this);
		}
	});
	$(document).on('mouseup', '*', function(event)
	{
		if (event.which == 3 && mouseDownElements.indexOf(this) >= 0)
		{
			$(this).trigger('rightclick');
		}
	});
	$(document).on('mouseup', function()
	{
		 mouseDownElements.length = 0;
	});
    // disable contextmenu
    $(document).on('contextmenu', function(event)
	{
		 event.preventDefault();
	});
});



// Usage:
$('#testButton').on('rightclick', function(event)
{
  alert('this was a rightclick');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testButton">Rightclick me</button>


1

Да, это так!

function doSomething(e) {
    var rightclick;
    if (!e) var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert('Rightclick: ' + rightclick); // true or false
}

Ну, технически это не «событие», но его можно использовать.
ChickenMilkBomb

@TimothyKhouri (и любой другой здесь): это совместимая функция прослушивателя событий. Вы бы передали сам объект функции в качестве второго аргумента addEventListener , который затем вызвал бы его при возникновении указанного события. Например:elem.addEventListener("click", doSomething)
Джон Вайс

1

Да, oncontextmenu - это, вероятно, лучшая альтернатива, но имейте в виду, что она срабатывает при нажатии мыши, а при нажатии мыши -

Другие связанные вопросы задавали вопрос о двойном щелчке правой кнопкой мыши - что, по-видимому, не поддерживается, за исключением ручной проверки таймера. Одна из причин, по которой вы можете захотеть иметь двойной щелчок правой кнопкой мыши, заключается в том, что вам нужно / нужно поддерживать левосторонний ввод с помощью мыши (реверсирование кнопок). Реализации браузера, кажется, делают много предположений о том, как мы должны использовать доступные устройства ввода.


1

Самый простой способ сделать правый клик, используя

 $('classx').on('contextmenu', function (event) {

 });

Однако это не кросс-браузерное решение, браузеры ведут себя по-разному для этого события, особенно Firefox и IE. Я бы порекомендовал ниже для кросс-браузерного решения

$('classx').on('mousedown', function (event) {
    var keycode = ( event.keyCode ? event.keyCode : event.which );
    if (keycode === 3) {
       //your right click code goes here      
    }
});

1

Это самый простой способ запустить его, и он работает во всех браузерах, кроме веб-просмотров приложений, таких как (CefSharp Chromium и т. Д.). Я надеюсь, что мой код поможет вам и удачи!

const contentToRightClick=document.querySelector("div#contentToRightClick");

//const contentToRightClick=window; //If you want to add it into the whole document

contentToRightClick.oncontextmenu=function(e){
  e=(e||window.event);
  e.preventDefault();
  console.log(e);
  
  return false; //Remove it if you want to keep the default contextmenu 
}
div#contentToRightClick{
  background-color: #eee;
  border: 1px solid rgba(0,0,0,.2);
  overflow: hidden;
  padding: 20px;
  height: 150px;
}
<div id="contentToRightClick">Right click on the box !</div>



0

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

 <html lang="en" oncontextmenu="func(); return false;">
 </html>

<script>
function func(){
alert("Yes");
}
</script>


0

Попробуйте использовать whichи / или buttonсвойство

демо

function onClick(e) {
  if (e.which === 1 || e.button === 0) {
    console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 2 || e.button === 1) {
    console.log('Middle mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 3 || e.button === 2) {
    console.log('Right mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 4 || e.button === 3) {
    console.log('Backward mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 5 || e.button === 4) {
    console.log('Forward mouse button ' + e.clientX + 'x' + e.clientY);
  }
}
window.addEventListener("mousedown", onClick);

Некоторая информация здесь


-1

Обработка события с использованием jQueryбиблиотеки

$(window).on("contextmenu", function(e)
{
   alert("Right click");
})

-1

Чтобы обрабатывать щелчок правой кнопкой мыши, вы можете использовать событие oncontextmenu. Ниже приведен пример:

 document.body.oncontextmenu=function(event) {
     alert(" Right click! ");
 };

Приведенный выше код предупреждает некоторый текст при нажатии правой кнопки мыши. Если вы не хотите, чтобы отображалось меню браузера по умолчанию, вы можете добавить return false; В конце содержания функции. Спасибо.


Вместо того, чтобы просто отвечать ответом, рекламирующим какую-то платформу, ваш ответ был бы более полезным, если бы он содержал ванильное JS-решение, а затем, возможно, развивал бы его, чтобы описать, как может быть проще использовать вашу платформу.
Ксанифф

Хорошо ... Спасибо за рекомендацию. На самом деле с vanilA js тоже очень просто
Sayanjyoti Das

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.