2010-11-20 3 views
160

Я хочу заблокировать стандартные контекстные меню и вручную обрабатывать событие щелчка правой кнопкой мыши.Как я могу захватить событие щелчка правой кнопкой мыши в JavaScript?

Как это делается?

+8

@systempuntoout Нет, это другой вопрос. Другой вопрос: «Блокировать правый клик, не используя javascript», этот вопрос просто хочет расширить его с помощью функциональности (многие сайты делают это без раздражающих пользователей, например, с документами Google) – bobobobo

+2

@Bobobobo: Правильно. Я нацелен на расширение пользовательского интерфейса, а не ограничение. – Giffyguy

+0

ctrl + click или cmd + click также являются допустимыми сценариями для этого. Несмотря на то, что он тесно связан с правым кликом, это, похоже, не является полным дубликатом, поскольку он обрабатывает контекстное меню, а не щелчок правой кнопкой мыши. Правый клик включен в контекстное меню, а не наоборот. –

ответ

234

Используйте oncontextmenu событие.

Вот е Xample:

<div oncontextmenu="javascript:alert('success!');return false;"> 
    Lorem Ipsum 
</div> 

И с помощью прослушивателя событий:

el.addEventListener('contextmenu', function(ev) { 
    ev.preventDefault(); 
    alert('success!'); 
    return false; 
}, false); 

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

Если вы собираетесь использовать функцию, которую вы написали, а не javascript:alert("Success!"), не забудьте вернуть false в BOTH функцию AND и атрибут oncontextmenu.

+52

с использованием прослушивателей событий: 'elt.addEventListener ('contextmenu', function (ev) {ev.preventDefault(); alert ('success!'); Return false;}, false); ' – rampion

+0

Отличный код +1, я нашел еще более тонкий способ. 'oncontextmenu = "chatMenu (event)" тогда просто используйте e.preventDefault (e), когда передаете его в chatMenu: D В этом случае:; return false; не нужно передавать для каждого нового элемента (скажем, для журналов чата или чего-то еще) –

+5

Это будет обрабатывать только правый щелчок. Если вам нужен один обработчик событий для всех типов кликов, используйте приведенный выше код в сочетании со следующим: 'var onMousedown = function (e) { if (e.which === 1) {/ * Левая мышь * /} else if (e.which === 3) {/ * Правая мышь * /} /*etc.*/ }; clickArea.addEventListener («mousedown», onMousedown); 'Слушатель контекстного меню позволит пройти через правый клик. Имейте в виду, что на Mac FF * ctrl + rightclick * выйдет как левый клик мыши, но на Mac Chrome * ctrl + rightclick * выйдет как правый щелчок мыши. –

21

Я думаю, что вы ищете что-то вроде этого:

function rightclick() { 
    var rightclick; 
    var e = window.event; 
    if (e.which) rightclick = (e.which == 3); 
    else if (e.button) rightclick = (e.button == 2); 
    alert(rightclick); // true or false, you can trap right click here by if comparison 
} 

(http://www.quirksmode.org/js/events_properties.html)

И затем использовать OnMouseDown даже с функцией RightClick() (если вы хотите использовать его в глобальном масштабе на вся страница, которую вы можете сделать это <body onmousedown=rightclick(); >

+1

Я думаю, вы имели в виду 'if ((e.which && e.which == 3) || (e.button && e.button == 2))'. – Shea

+4

или просто (e.which === 3 || e.button === 2) – ansiart

+0

Это старая школа, но она работает почти везде. – nekavally

Смежные вопросы