Auslösen eines Onclick-Ereignisses mit einem mittleren Klick

89

Ich verwende das onclickEreignis eines Hash-Links, um <div>ein Popup zu öffnen . Aber in der Mitte Klick nicht das auslösen onclickEreignis aber nur nimmt den hrefAttributwert des Link und lädt die URL in einer neuen Seite. Wie kann ich mit dem mittleren Klick das <div>als Popup öffnen ?

Sadesh Kumar N.
quelle
15
Ich verstehe immer noch nicht, wie das Problem gelöst wurde, wenn ein mittlerer Klick das Ereignis onclick nicht auslöst.
Tomáš Zato - Wiedereinsetzung Monica
3
@ TomášZato Browser lösen kein "Klick" -Ereignis mit einem mittleren Klick aus, aber sie können ein "Mouseup" -Ereignis auslösen. Dann kann das Javascript-Framework dies an eine Klickaktion binden, um Sie zu verwirren. Ich empfehle das Lesen von unixpapa.com/js/mouse.html
rds

Antworten:

64

BEARBEITEN

Diese Antwort ist veraltet und funktioniert in Chrome nicht. Sie werden höchstwahrscheinlich das Auxlink-Ereignis verwenden , aber bitte beziehen Sie sich auf andere Antworten unten.

/BEARBEITEN


Die Antwort von betteln ist richtig, aber es hört sich so an, als ob Sie die Standardaktion des mittleren Klicks verhindern möchten. In diesem Fall schließen Sie Folgendes ein

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

PreventDefault () stoppt die Standardaktion des Ereignisses.

Gausie
quelle
19
Denken Sie daran, dass .liveveraltet und zugunsten von.on
Naftali aka Neal
2
Für mich funktioniert FF nur mit Mousedown-Event. Klicken Sie auf Ereignis ruft dieses Ding scr.hu/1kig/su5c9
l00k
1
Gibt es dafür eine browserübergreifende Konstante 2?
Fracz
11
Dies funktioniert nicht mehr in Chrome 55. Siehe 1 , 2 und diese Frage
billc.cn
1
Wie ist dies eine Lösung, wenn das Problem darin bestand, dass der mittlere Klick das Klickereignis zunächst nicht auslöst?
Drazen Bjelovuk
31

Damit die mittlere Klick- / Mausrad-Taste erkannt wird, müssen Sie das Ereignis verwenden auxclick. Z.B:

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

Dann in Ihrer Skriptdatei

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

Wenn Sie dies über JavaScript tun möchten (ohne das HTML-Attribut zu verwenden onauxclick), gelangen Sie addEventListenerzum Element:

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})
<a id="myLink" href="http://example.com">middle click me</a>

Schauen Sie sich hier die MDN-Seite über die auxclickVeranstaltung an .

Hassan
quelle
Hinweis: Onauxclick wird funktionieren, aber es öffnet den Link nicht in einem neuen Tab ...
Jonathan Laliberte
2
Dies ist die einzige Antwort, die in Chrome tatsächlich funktioniert. Wenn Sie ein "Klick" -Ereignis für die rechte Maustaste benötigen, können Sie das "Kontextmenü" verwenden (obwohl es nicht nur durch Rechtsklick ausgelöst wird): developer.mozilla.org/en-US/docs/Web/API/Element/…
Humpparitari
1
In Kombination mit der obigen Antwort können Sie verhindern, dass mit der rechten Maustaste eine if(event.button==1)Klausel erfasst wird . Dies ist die einzige funktionierende Antwort.
Buddy
Beachten Sie, dass Sie sowohl das auxclickEreignis verwenden als auch den Wert von überprüfen müssen e.button == 1. Ich habe die Antwort bearbeitet.
Flimm
26

Sie können verwenden

event.button

um zu identifizieren, welche Maustaste geklickt wurde.

Gibt einen ganzzahligen Wert zurück, der die Schaltfläche angibt, deren Status geändert wurde.

  • 0 für Standard-Klick, normalerweise linke Taste
  • 1 für mittlere Taste, normalerweise Radklick
  • 2 für die rechte Schaltfläche, normalerweise mit der rechten Maustaste

Beachten Sie, dass diese Konvention in Internet Explorer nicht befolgt wird: Weitere Informationen finden Sie unter QuirksMode.

Die Reihenfolge der Tasten kann je nach Konfiguration des Zeigegeräts unterschiedlich sein.

Lesen Sie auch

Welche Maustaste wurde angeklickt?

Es gibt zwei Eigenschaften, um herauszufinden, auf welche Maustaste geklickt wurde: welche und welche. Bitte beachten Sie, dass diese Eigenschaften bei einem Klickereignis nicht immer funktionieren. Um eine Maustaste sicher zu erkennen, müssen Sie die Mousedown- oder Mouseup-Ereignisse verwenden.

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});
<a id="foo" href="http://example.com">middle click me</a>

rahul
quelle
4
Ich würde empfehlen, event.whichda es für alle Browser in der jQuery-Quellzeile standardisiert ist - Zeile 2756 -if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
Russ Cam
2
@RussCam Ist jedoch MouseEvent.whichin keiner Spezifikation MouseEvent.buttondefiniert , sondern in DOM L2-Ereignissen.
Oriol
@Oriol korrekt, aber bei verschiedenen Browser-Anbietern unterschiedlich implementiert. Das OP hat die Frage mit jQuery markiert. Deshalb habe ich die Verwendung vorgeschlagen, hätte event.whichaber näher darauf eingehen sollen, dass dies MouseEvent.whichnicht Teil der offiziellen Spezifikation ist.
Russ Cam
@rahul, was ist mit Gaming-Mäusen mit mehr als 7 Tasten? Egg-tech.com/blog/images/mouse%20buttons.jpg
Pacerier
Tatsächlich funktioniert dies in Browsern wie Firefox oder Chrome nicht, nur für den primären Klick. Siehe 1 , 2 und diese Frage .
Flimm
8

Normalerweise hasse ich es, wenn Leute Alternativen anstelle von Lösungen anbieten, aber da bereits Lösungen bereitgestellt wurden, werde ich meine eigene Regel brechen.

Websites, auf denen die Middle-Click-Funktion überschrieben wird, nerven mich sehr, sehr. Normalerweise klicke ich mit der mittleren Maustaste, weil ich den neuen Inhalt in einem neuen Tab öffnen möchte, während ich eine ungehinderte Ansicht des aktuellen Inhalts habe. Jedes Mal, wenn Sie die Middle-Click-Funktion in Ruhe lassen und den relevanten Inhalt über das HREF-Attribut Ihres angeklickten Elements verfügbar machen können, sind Sie der festen Überzeugung, dass Sie dies tun sollten.

Tom Haflinger
quelle
Aber was ist, wenn Sie Registerkarten auf Ihrer Webseite haben und dasselbe Verhalten wie in Ihrem Browser wünschen? Ein mittlerer Klick sollte dann eine vorhandene Registerkarte schließen.
cmxl
6

jQuery stellt ein .whichAttribut für das Ereignis bereit , das die Klickschaltflächen-ID von links nach rechts als 1, 2, 3 angibt. In diesem Fall möchten Sie 2.

Verwendung:

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
}); 

Die Antwort von Adamantium wird auch funktionieren, aber Sie müssen auf IE achten, wie er bemerkt:

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

Denken Sie auch daran, dass das .buttonAttribut 0-indiziert und nicht 1-indiziert ist .which.

bettelt
quelle
Kann ich die Funktionalität des Mozilla-Browsers überschreiben? zB beim Linksklick öffnet sich ein Popup .... aber beim mittleren Klick öffnet es kein Popup und es wird eine neue Registerkarte geöffnet, in der sich das Popup nicht öffnet. Ich möchte also eine mittlere Klickfunktion von überschreiben Mozilla ....
Sadesh Kumar N
Mozilla hat die Einstellung, alle Popups in einem neuen Tab anstatt in einem neuen Fenster zu öffnen. Wenn der Benutzer diese Option aktiviert ist, dann kann ich nicht denke , es etwas gibt , was Sie tun können. Wenn dies nicht der Fall ist, können Sie einen Code oder einen Link zur Problemseite veröffentlichen?
bettelt
Dies funktioniert nicht in Browsern wie Firefox und Chrome.
Flimm
6

Diese Frage ist etwas alt, aber ich habe eine Lösung gefunden:

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Chrome löst kein "Klick" -Ereignis für das Mausrad aus

Arbeiten Sie in FF und Chrome

Bastien Bast Weber
quelle
Ich möchte Ihren Anwendungsfall nicht annehmen, aber ich würde wetten, dass viele Leute stattdessen das 'mouseup'-Ereignis benötigen würden. Es funktioniert auch mit der mittleren Maustaste.
Bojidar Stanchev
Wenn ich dies in Firefox und Chrome versuche, wird das Standardverhalten beim Öffnen des Links in einem neuen Tab nicht verhindert, obwohl e.preventDefault()es aufgerufen wird.
Flimm
5

Die geeignete Methode ist die Verwendung .on, wie .livewurde verworfen und dann entfernt von jQuery:

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

Oder wenn Sie das Gefühl haben möchten, "live" zu sein und #foosich beim Dokumentstart nicht auf Ihrer Seite befinden:

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

ursprüngliche Antwort

Naftali alias Neal
quelle
Das Ereignis clickfunktioniert nicht für die mittlere Maustaste in Browsern wie Firefox und Chrome.
Flimm
es pflegte @Flimm
Naftali aka Neal
Ja. Der Stapelüberlauf bietet keine gute Lösung für veraltete Antworten. Ich fürchte, ich muss abstimmen, weil "Diese Antwort ist nicht mehr nützlich". Was noch schlimmer ist, ist, dass die angeheftete Antwort Hunderte oder Tausende von Abstimmungen haben kann, weil sie veraltet ist, und sie bleibt für immer festgehalten, wenn das OP nicht antwortet.
Flimm
Stellen Sie eine neue Frage :-) (beziehen Sie sich auf diese Frage und sagen Sie, dass sie veraltet ist und Sie eine Antwort für 2020 wünschen). Aber können Sie vielleicht auch Mousedown / Mouseup-Ereignisse verwenden?
Naftali aka Neal
Selbst wenn ich das tue, werden Leute wie ich immer noch auf diese Antwort stoßen, wenn sie von Suchmaschinen kommen, und werden durch die falsche Antwort verwirrt sein.
Flimm
3

Ich weiß, dass ich zu spät zur Party komme, aber für diejenigen, die immer noch Probleme mit der Handhabung des mittleren Klicks haben, prüfen Sie, ob Sie die Veranstaltung delegieren. Im Falle einer Delegation wird die clickVeranstaltung nicht ausgelöst. Vergleichen Sie:

Dies funktioniert für mittlere Klicks:

$('a').on('click', function(){
  console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Dies funktioniert nicht bei mittleren Klicks:

$('div').on('click', 'a', function(){
  alert('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

Wenn Sie den mittleren Klick mithilfe der Ereignisdelegierung weiterhin verfolgen müssen, können Sie , wie im entsprechenden jQuery-Ticket angegeben , nur mousedownoder mouseupstattdessen verwenden. Wie so:

Dies funktioniert für delegierte mittlere Klicks:

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

Sehen Sie es hier online .

überspringen405
quelle
Funktioniert eigentlich clicknicht für mittlere Klicks wie in Ihrem ersten Beispiel.
Flimm