Klicken Sie mit der rechten Maustaste auf ein Javascript-Ereignis?

173

Klicken Sie mit der rechten Maustaste auf ein Javascript-Ereignis? Wenn ja, wie verwende ich es?

Brian
quelle

Antworten:

188

Wie bereits erwähnt, kann die rechte Maustaste durch die üblichen Mausereignisse (Mousedown, Mouseup, Klick) erkannt werden . Wenn Sie jedoch nach einem Auslöseereignis suchen, wenn das Kontextmenü angezeigt wird, suchen Sie an der falschen Stelle. Das Rechtsklick- / Kontextmenü ist auch über die Tastatur zugänglich (Umschalt + F10 oder Kontextmenütaste unter Windows und einigen Linux-Versionen). In dieser Situation suchen Sie nach oncontextmenu:

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

Für die Mausereignisse selbst legen Browser eine Eigenschaft für das Ereignisobjekt fest, auf die über die Ereignisbehandlungsfunktion zugegriffen werden kann:

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.
quelle
5
Genau wie beim which / button-Problem ist das 'oncontextmenu' nicht in allen Browsern gleich implementiert ... siehe quirksmode.org/dom/events/contextmenu.html für einige der 'Fallstricke'.
Smencer
3
@ AndyE Hallo Andy, der Ausdruck (isRightMB?"was not" : "")sollte sein (isRightMB?"was" : "was not"). Richtig ? Bitte helfen Sie bei der Überprüfung.
Joe.wang
1
@Joe: lustig, wie das 32 Stimmen und 4 Jahre gelaufen ist, ohne dass es jemand bemerkt hat ;-) Ich denke, ich kann mich entschuldigen - es war 00:30 Uhr, als ich die Antwort schrieb!
Andy E
1
Beachten Sie, dass bei Mac FF Strg + Rechtsklick als linker Mausklick (e.which === 1) angezeigt wird , während bei Mac Chrome Strg + Rechtsklick als erwarteter Rechtsklick angezeigt wird (e.ctrlKey && e .was === 3).
ND
8
In Chrome 59 wird die rechte Maustaste ausgelöst onmousedownund onmouseup, aber nicht onclick. Anscheinend wird in Chrome onclicknur die linke Maustaste ausgelöst. (und ja Leute, ich habe das mehrmals getestet) Um einen Rechtsklick zu erkennen, müssen Sie entweder kombinieren onmousedownund onmouseupoder verwenden oncontextmenu.
Venryx
27

Schauen Sie sich den folgenden jQuery-Code an:

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

Der Wert von whichwird sein:

  • 1 für die linke Taste
  • 2 für die mittlere Taste
  • 3 für die rechte Taste
Phil Rykoff
quelle
2
Eeeew, das ist schrecklich! Warum ist das .whichnicht dasselbe wie .button? Oo .button=> 0,1,2 ; which=> 1,2,3 . das ist einfach falsch
Ben Philipp
11

Sie können das Ereignis window.oncontextmenubeispielsweise verwenden:

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

Radi Cho
quelle
Dies feuert auch links mb
Alex
Super +1, wie blockiere ich jetzt das Kontextmenü? @ user12345678
Shayan
2
@ Shayan e.preventDefault ()
Brian Allan West
@BrianAllanWest Ist das jQuery? Ich weiß nicht, wie ich das benutzen soll. window.oncontextmenu = function () { e.preventDefault() }hat nicht funktioniert.
Shayan
2
@Shayan, nein, es ist rohes Javascript ... Sie würden es so verwenden ... window.oncontextmenu = function (e) {e.preventDefault ();} Dies verhindert das Standardverhalten des Browsers, wenn das Kontextmenü (dh: Rechtsklick oder Halten auf Mac) wird gedrückt.
Brian Allan West
6

Ja, obwohl w3c sagt, dass der Rechtsklick durch das Klickereignis erkannt werden kann, wird onClick in normalen Browsern nicht durch Rechtsklick ausgelöst.

Tatsächlich lösen Sie mit der rechten Maustaste nur onMouseDown onMouseUp und onContextMenu aus.

Daher können Sie "onContextMenu" als Rechtsklickereignis betrachten. Es ist ein HTML5.0-Standard.

Eric
quelle
1
Ja, das klingt nach einer großartigen Lösung, insbesondere wenn Sie auf neuere Browser abzielen. Ich denke nicht, dass dies nur ein HTML5.0 ist, da sogar IE 5.5 es auf Elementen unterstützt! Hier ist mehr darüber, welche Browser es unterstützen: quirksmode.org/dom/events/contextmenu.html
Ignas2526
5

Wenn Sie einen Rechtsklick erkennen möchten, sollten Sie keine MouseEvent.whichEigenschaft verwenden, da diese nicht dem Standard entspricht und die Browser inkompatibel sind. (siehe MDN ) Sie sollten stattdessen verwenden MouseEvent.button. Es wird eine Zahl zurückgegeben, die eine bestimmte Schaltfläche darstellt:

  • 0: Haupttaste gedrückt, normalerweise die linke Taste oder der nicht initialisierte Zustand
  • 1: Hilfstaste gedrückt, normalerweise die Radtaste oder die mittlere Taste (falls vorhanden)
  • 2: Sekundäre Taste gedrückt, normalerweise die rechte Taste
  • 3: Vierte Schaltfläche, normalerweise die Schaltfläche "Browser zurück"
  • 4: Fünfte Schaltfläche, normalerweise die Schaltfläche Browser-Weiterleitung

MouseEvent.button verarbeitet mehr Eingabetypen als nur Standardmaus:

Die Schaltflächen können anders konfiguriert sein als das Standardlayout "von links nach rechts". Bei einer für Linkshänder konfigurierten Maus können die Tastenaktionen umgekehrt werden. Einige Zeigegeräte haben nur eine Taste und verwenden eine Tastatur oder andere Eingabemechanismen, um Haupt-, Neben-, Hilfs- usw. anzuzeigen. Andere haben möglicherweise viele Tasten, die unterschiedlichen Funktionen und Tastenwerten zugeordnet sind.

Referenz:

  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
quelle
Ich wünschte, dies wäre die erste Antwort gewesen, die ich bei der Suche gesehen habe
Gunnar Már Óttarsson
3

Nein, aber Sie können erkennen, welche Maustaste im Ereignis "onmousedown" verwendet wurde ... und von dort aus feststellen, ob es sich um einen "Rechtsklick" handelt.

Timothy Khouri
quelle
@Brian: Ein Rechtsklick wird ausgelöst onmousedown, onmouseupund onclick. Wenn Sie das Kontextmenü überschreiben möchten, sollten Sie diese Ereignisse jedoch nicht verwenden (siehe meine Antwort unten).
Andy E
2

Der folgende Code verwendet jQuery, um ein benutzerdefiniertes rightclickEreignis basierend auf dem Standard mousedownund den mouseupEreignissen zu generieren . Dabei werden folgende Punkte berücksichtigt:

  • Trigger beim Mouseup
  • Wird nur ausgelöst, wenn zuvor die Maus auf dasselbe Element gedrückt wurde
  • Dieser Code funktioniert insbesondere auch in JFX Webview (da das contextmenuEreignis dort nicht ausgelöst wird)
  • es löst nicht , wenn die contextmenu Taste auf der Tastatur gedrückt wird (wie die Lösung mit der on('contextmenu', ...)tut

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

Ja, so ist es!

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
quelle
Nun - technisch gesehen ist es kein "Ereignis", aber es kann verwendet werden.
ChickenMilkBomb
@ TimothyKhouri (und alle anderen hier): Dies ist eine kompatible Ereignis-Listener-Funktion. Sie würden die Funktion Objekt selbst als zweites Argument übergeben addEventListener , die dann würde nennen es auf das Auftreten des angegebenen Ereignisses. Zum Beispiel:elem.addEventListener("click", doSomething)
John Weisz
1

Ja, das Kontextmenü ist wahrscheinlich die beste Alternative. Beachten Sie jedoch, dass es mit der Maus nach unten ausgelöst wird, während das Klicken mit der Maus nach oben ausgelöst wird.

Andere verwandte Fragen betrafen das Doppelklicken mit der rechten Maustaste - was anscheinend nur durch manuelle Timerprüfung unterstützt wird. Ein Grund, warum Sie möglicherweise einen Doppelklick mit der rechten Maustaste wünschen, ist, wenn Sie die Eingabe mit der linken Hand benötigen (Tastenumkehr). Die Browser-Implementierungen scheinen viele Annahmen darüber zu treffen, wie wir die verfügbaren Eingabegeräte verwenden sollten.

phbcanada
quelle
1

Der einfachste Weg, um mit der rechten Maustaste zu klicken, ist die Verwendung

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

 });

Dies ist jedoch keine browserübergreifende Lösung. Browser verhalten sich für dieses Ereignis unterschiedlich, insbesondere Firefox und IE. Ich würde unten für eine Cross-Browser-Lösung empfehlen

$('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
quelle
1

Dies ist der einfachste Weg, um es auszulösen, und es funktioniert in allen Browsern mit Ausnahme von Anwendungs-Webviews wie (CefSharp Chromium usw.). Ich hoffe mein Code hilft dir und viel Glück!

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
quelle
1

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

Mohn
quelle
0

Wenn Sie die Funktion aufrufen möchten, während Sie mit der rechten Maustaste auf ein Ereignis klicken, können Sie Folgendes verwenden

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

<script>
function func(){
alert("Yes");
}
</script>
Madhu Priya
quelle
0

Das wird bei mir gearbeitet

if (evt.xa.which == 3) 
{
    alert("Right mouse clicked");
}
Amr Elngm
quelle
0

Versuchen Sie es mit der Eigenschaft whichund / oderbutton

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

Einige Infos hier

F8ER
quelle
-1

Ereignis mit jQueryBibliothek behandeln

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

Um mit der rechten Maustaste zu klicken, können Sie das Ereignis 'oncontextmenu' verwenden. Unten ist ein Beispiel:

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

Der obige Code warnt Text, wenn Sie mit der rechten Maustaste klicken. Wenn das Standardmenü des Browsers nicht angezeigt werden soll, können Sie return false hinzufügen. Am Ende des Funktionsinhalts. Vielen Dank.

Sayanjyoti Das
quelle
Anstatt einfach mit einer Antwort zu antworten, die für ein Framework wirbt, wäre Ihre Antwort nützlicher, wenn sie eine Vanilla JS-Lösung enthält, und sie dann möglicherweise näher zu erläutern, wie es einfacher sein könnte, Ihr Framework auch zu verwenden.
Xaniff
Ok ... Danke für die Empfehlung. Es ist eigentlich auch sehr einfach mit vanilA js
Sayanjyoti Das
-2

Ja, es ist ein Javascript-Mousedown-Ereignis. Es gibt auch ein jQuery- Plugin, um dies zu tun

Teja Kantamneni
quelle