Czy kliknięcie prawym przyciskiem myszy jest zdarzeniem JavaScript?

173

Czy kliknięcie prawym przyciskiem myszy jest zdarzeniem JavaScript? Jeśli tak, jak go używać?

Brian
źródło

Odpowiedzi:

188

Jak wspominali inni, prawy przycisk myszy można wykryć za pomocą typowych zdarzeń myszy (przesunięcie kursora myszy, przesunięcie myszy, kliknięcie) . Jeśli jednak szukasz zdarzenia strzeleckiego, gdy pojawia się menu prawego przycisku myszy, szukasz w złym miejscu. Menu kontekstowe / kliknięcie prawym przyciskiem myszy jest również dostępne za pośrednictwem klawiatury (shift + F10 lub klawisz menu kontekstowego w systemie Windows i niektórych systemach Linux). W tej sytuacji wydarzenie, którego szukasz, to oncontextmenu:

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

Jeśli chodzi o same zdarzenia myszy, przeglądarki ustawiają właściwość na obiekt zdarzenia, który jest dostępny z funkcji obsługi zdarzenia:

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

Andy E.
źródło
5
Podobnie jak w przypadku problemu z przyciskiem /, „oncontextmenu” nie jest zaimplementowane tak samo we wszystkich przeglądarkach ... zobacz quirksmode.org/dom/events/contextmenu.html, aby uzyskać informacje na temat niektórych „pułapek”.
smencer
3
@AndyE Cześć Andy, wyrażenie (isRightMB?"was not" : "")powinno brzmieć (isRightMB?"was" : "was not"). Dobrze ? Proszę o pomoc, aby to przejrzeć.
Joe.wang,
1
@Joe: zabawne, jak poszło 32 głosów w górę i 4 lata, a nikt tego nie zauważył ;-) Myślę jednak, że mogę być usprawiedliwiony - była 00:30, kiedy napisałem odpowiedź!
Andy E,
1
Należy pamiętać, że na Macu FF ctrl + prawe kliknięcie przejdzie jako kliknięcie lewym przyciskiem myszy (e.which === 1), podczas gdy na Mac Chrome ctrl + prawe kliknięcie przejdzie jako oczekiwane kliknięcie prawym przyciskiem myszy (e.ctrlKey && e . co === 3).
ND
8
W Chrome 59 prawy przycisk myszy uruchamia onmousedowni onmouseup, ale nie onclick. Najwyraźniej w Chrome onclickjest uruchamiany tylko dla lewego przycisku myszy. (i tak, testowałem to wiele razy) Aby wykryć kliknięcie prawym przyciskiem myszy, musisz albo połączyć onmousedowni onmouseup, albo użyć oncontextmenu.
Venryx
27

spójrz na następujący kod jQuery:

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

Wartość whichbędzie:

  • 1 dla lewego przycisku
  • 2 dla środkowego przycisku
  • 3 dla prawego przycisku
Phil Rykoff
źródło
2
Eeeew, to straszne! Dlaczego .whichnie jest taki sam jak .button? Oo .button=> 0,1,2 ; which=> 1,2,3 . to jest po prostu złe.
Ben Philipp
11

Możesz wykorzystać wydarzenie window.oncontextmenuna przykład:

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

Radi Cho
źródło
to również pożary opuścił mb
Alex
Niesamowite +1. Jak teraz zablokować menu kontekstowe? @ user12345678
Shayan
2
@Shayan e.preventDefault ()
Brian Allan West
@BrianAllanWest Czy to jQuery? Nie wiem, jak tego używać. window.oncontextmenu = function () { e.preventDefault() }nie zadziałało.
Shayan
2
@Shayan, nie, to surowy javascript ... użyłbyś go w ten sposób ... window.oncontextmenu = function (e) {e.preventDefault ();} to zapobiega domyślnemu zachowaniu przeglądarki, gdy menu kontekstowe (tj: kliknij prawym przyciskiem myszy lub przytrzymaj na komputerze Mac).
Brian Allan West
6

Tak, chociaż w3c twierdzi, że prawe kliknięcie można wykryć przez zdarzenie kliknięcia, onClick nie jest uruchamiany przez kliknięcie prawym przyciskiem w zwykłych przeglądarkach.

W rzeczywistości, kliknięcie prawym przyciskiem wywołuje tylko onMouseDown onMouseUp i onContextMenu.

W ten sposób można traktować „onContextMenu” jako zdarzenie kliknięcia prawym przyciskiem myszy. To standard HTML5.0.

Eric
źródło
1
Tak, brzmi to jak świetne rozwiązanie, zwłaszcza jeśli celujesz w nowsze przeglądarki. Nie sądzę, żeby to był tylko HTML5.0, ponieważ nawet IE 5.5 obsługuje go na elementach! Oto więcej informacji na temat obsługiwanych przeglądarek: quirksmode.org/dom/events/contextmenu.html
Ignas2526
5

Jeśli chcesz wykryć kliknięcie prawym przyciskiem myszy, nie powinieneś używać MouseEvent.whichwłaściwości, ponieważ jest ona niestandardowa i występuje duża niekompatybilność między przeglądarkami. (patrz MDN ) Zamiast tego powinieneś użyć MouseEvent.button. Zwraca liczbę reprezentującą dany przycisk:

  • 0: Naciśnięto przycisk główny, zwykle lewy przycisk lub stan niezainicjalizowany
  • 1: Wciśnięty przycisk pomocniczy, zwykle przycisk kółka lub przycisk środkowy (jeśli występuje)
  • 2: Drugi przycisk wciśnięty, zwykle prawy przycisk
  • 3: Czwarty przycisk, zazwyczaj przycisk Wstecz w przeglądarce
  • 4: Piąty przycisk, zazwyczaj przycisk Przeglądarka do przodu

MouseEvent.button obsługuje więcej typów danych wejściowych niż zwykła mysz:

Przyciski mogą być konfigurowane inaczej niż w standardowym układzie „od lewej do prawej”. W przypadku myszy skonfigurowanej do użytku przez osoby leworęczne działania przycisków mogą być odwrócone. Niektóre urządzenia wskazujące mają tylko jeden przycisk i używają klawiatury lub innych mechanizmów wejściowych do wskazywania głównego, pomocniczego, pomocniczego itp. Inne mogą mieć wiele przycisków przypisanych do różnych funkcji i wartości przycisków.

Odniesienie:

  1. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
  2. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
AlienKevin
źródło
Chciałbym, żeby to była pierwsza odpowiedź, jaką zobaczyłem podczas wyszukiwania
Gunnar Már Óttarsson
3

Nie, ale możesz wykryć, który przycisk myszy został użyty w zdarzeniu „onmousedown” ... i na tej podstawie określić, czy było to „kliknięcie prawym przyciskiem”.

Timothy Khouri
źródło
@Brian: prawo kliknięcie spowoduje onmousedown, onmouseupi onclick. Jeśli jednak patrzysz na zastąpienie menu prawego przycisku myszy, te zdarzenia nie są tym, czego powinieneś używać (zobacz moją odpowiedź poniżej).
Andy E
2

Poniższy kod używa jQuery do generowania rightclickzdarzenia niestandardowego na podstawie wartości domyślnych mousedowni mouseupzdarzeń. Uwzględnia następujące kwestie:

  • wyzwalacz po najechaniu myszą
  • wyzwalać tylko po naciśnięciu przycisku myszy na tym samym elemencie wcześniej
  • ten kod działa szczególnie również w JFX Webview (ponieważ tam contextmenuzdarzenie nie jest wyzwalane)
  • to nie wyzwala, gdy klucz contextmenu na klawiaturze przycisku (jak rozwiązanie z on('contextmenu', ...)robi

$(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>

Frederic Leitenberger
źródło
1

Tak to jest!

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
źródło
No cóż - technicznie nie jest to „wydarzenie”, ale można z niego skorzystać.
ChickenMilkBomb
@TimothyKhouri (i wszyscy inni tutaj): jest to kompatybilna funkcja nasłuchiwania zdarzeń. Można by przejść samego obiektu funkcjonować jako drugi argument do addEventListener , które następnie wywołać go na wystąpienie określonego zdarzenia. Na przykład:elem.addEventListener("click", doSomething)
John Weisz
1

Tak, menu oncontextmenu jest prawdopodobnie najlepszą alternatywą, ale należy pamiętać, że uruchamia się po naciśnięciu myszy, podczas gdy kliknięcie uruchamia się po podniesieniu myszy.

Inne powiązane pytania dotyczyły podwójnego kliknięcia prawym przyciskiem myszy - które najwyraźniej nie jest obsługiwane, z wyjątkiem ręcznego sprawdzania timera. Jednym z powodów, dla których możesz chcieć mieć możliwość dwukrotnego kliknięcia prawym przyciskiem myszy, jest to, że potrzebujesz / chcesz obsługiwać leworęczne wprowadzanie myszy (odwrócenie przycisku). Wydaje się, że implementacje przeglądarek przyjmują wiele założeń dotyczących tego, jak powinniśmy używać dostępnych urządzeń wejściowych.

phbcanada
źródło
1

Najłatwiejszym sposobem na wykonanie prawego kliknięcia jest użycie

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

 });

Jednak nie jest to rozwiązanie dla różnych przeglądarek, przeglądarki zachowują się inaczej w przypadku tego zdarzenia, zwłaszcza w przypadku przeglądarek Firefox i IE. Polecam poniżej rozwiązanie dla różnych przeglądarek

$('classx').on('mousedown', function (event) {
    var keycode = ( event.keyCode ? event.keyCode : event.which );
    if (keycode === 3) {
       //your right click code goes here      
    }
});
imal hasaranga perera
źródło
1

Jest to najłatwiejszy sposób na uruchomienie go i działa we wszystkich przeglądarkach z wyjątkiem przeglądarek internetowych aplikacji, takich jak (CefSharp Chromium itp.). Mam nadzieję, że mój kod Ci pomoże i powodzenia!

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>

Adnane Ar
źródło
1

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

MAK
źródło
0

Jeśli chcesz wywołać funkcję, podczas gdy zdarzenie kliknięcia prawym przyciskiem oznacza, że ​​możemy użyć następującego

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

<script>
function func(){
alert("Yes");
}
</script>
madhu priya
źródło
0

To działa ze mną

if (evt.xa.which == 3) 
{
    alert("Right mouse clicked");
}
Amr Elngm
źródło
0

Spróbuj użyć whichi / lub buttonwłasności

demo

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

Trochę informacji tutaj

F8ER
źródło
-1

Obsługa zdarzenia przy użyciu jQuerybiblioteki

$(window).on("contextmenu", function(e)
{
   alert("Right click");
})
Ilya
źródło
-1

Aby obsłużyć kliknięcie prawym przyciskiem myszy, możesz użyć zdarzenia „oncontextmenu”. Poniżej przykład:

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

powyższy kod ostrzega o pewnym tekście po naciśnięciu prawego przycisku myszy. Jeśli nie chcesz, aby pojawiło się domyślne menu przeglądarki, możesz dodać return false; Na końcu treść funkcji. Dzięki.

Sayanjyoti Das
źródło
Zamiast odpowiadać po prostu odpowiedzią promującą jakiś framework, twoja odpowiedź byłaby bardziej użyteczna, gdyby zawierała proste rozwiązanie JS, a następnie być może rozwinął ją, aby opisać, jak łatwiej byłoby również używać twojego frameworka.
Xaniff,
Ok ... Dzięki za rekomendację. Właściwie jest to bardzo łatwe z vanilA js
Sayanjyoti Das
-2

Tak, to zdarzenie myszy w javascript. Jest też wtyczka jQuery, która to robi

Teja Kantamneni
źródło