Auslösen eines Onclick-Ereignisses mit einem mittleren Klick

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 ?

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.

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 .

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>

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.

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.

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

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

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 .