Wyzwalanie zdarzenia onclick za pomocą środkowego kliknięcia

Używam onclickzdarzenia haszowanego linku, aby otworzyć <div>jako wyskakujące okienko. Ale środkowe kliknięcie nie wywołuje onclickzdarzenia, a jedynie pobiera hrefwartość atrybutu linku i ładuje adres URL na nowej stronie. Jak mogę użyć środkowego kliknięcia, aby otworzyć <div>wyskakujące okienko?

EDYTOWAĆ

Ta odpowiedź została wycofana i nie działa w Chrome. Najprawdopodobniej użyjesz zdarzenia auxlink , ale zapoznaj się z innymi odpowiedziami poniżej.

/EDYTOWAĆ

Odpowiedź beggsa jest poprawna, ale wygląda na to, że chcesz zapobiec domyślnej akcji środkowego kliknięcia. W takim przypadku uwzględnij następujące elementy

$("#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 () zatrzyma domyślne działanie zdarzenia.

Aby wykryć przycisk środkowego kliknięcia / kółka myszy, musisz użyć zdarzenia auxclick. Na przykład:

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

Następnie w pliku skryptu

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

Jeśli chcesz to zrobić z JavaScript (bez użycia atrybutu HTML onauxclick), to przejdź addEventListenerdo elementu:

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>

Sprawdź stronę mdn o auxclickwydarzeniu tutaj .

Możesz użyć

event.button

aby zidentyfikować, który przycisk myszy został kliknięty.

Zwraca wartość całkowitą wskazującą przycisk, który zmienił stan.

• 0 dla standardowego kliknięcia, zwykle lewy przycisk
• 1 dla środkowego przycisku, zwykle kliknij kółkiem
• 2 dla prawego przycisku, zwykle prawym przyciskiem myszy

Zwróć uwagę, że ta konwencja nie jest przestrzegana w programie Internet Explorer: szczegółowe informacje można znaleźć w artykule QuirksMode.

Kolejność przycisków może być różna w zależności od konfiguracji urządzenia wskazującego.

Przeczytaj także

Który przycisk myszy został kliknięty?

Istnieją dwie właściwości umożliwiające sprawdzenie, który przycisk myszy został kliknięty: który i przycisk. Pamiętaj, że te właściwości nie zawsze działają w przypadku kliknięcia. Aby bezpiecznie wykryć przycisk myszy, musisz użyć zdarzeń mousedown lub mouseup.

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});

<a id="foo" href="http://example.com">middle click me</a>

Zwykle nienawidzę, gdy ludzie oferują alternatywy zamiast rozwiązań, ale ponieważ rozwiązania zostały już dostarczone, zamierzam złamać własną zasadę.

Witryny, w których funkcja kliknięcia środkowym przyciskiem jest zastępowana, zwykle bardzo mnie wkurza. Zwykle klikam środkowym przyciskiem, ponieważ chcę otworzyć nową zawartość w nowej karcie, mając niezakłócony widok bieżącej zawartości. Za każdym razem, gdy możesz zostawić w spokoju funkcję kliknięcia środkowym przyciskiem i udostępnić odpowiednią treść za pośrednictwem atrybutu HREF klikniętego elementu, jestem przekonany, że to właśnie powinieneś zrobić.

jQuery udostępnia .whichatrybut zdarzenia, który nadaje identyfikatorowi przycisku kliknięcia od lewej do prawej 1, 2, 3. W tym przypadku chcesz 2.

Stosowanie:

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

Odpowiedź Adamantium również zadziała, ale musisz uważać na IE, ponieważ zauważa:

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

Pamiętaj również, że .buttonatrybut jest indeksowany 0, a nie 1, jak .which.

To pytanie jest trochę stare, ale znalazłem rozwiązanie:

$(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 nie uruchamia zdarzenia „kliknięcia” dla kółka myszy

Pracuj w FF i Chrome

Właściwą metodą jest użycie tego .on, .liveco zostało wycofane, a następnie usunięte z jQuery:

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

Lub jeśli chcesz, aby poczuć się jak na żywo i #foonie ma go na stronie na początku dokumentu:

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

oryginalna odpowiedź

Wiem, że spóźniłem się na imprezę, ale dla tych, którzy nadal mają problemy z obsługą środkowego kliknięcia, sprawdź, czy delegujesz wydarzenie. W przypadku delegacji clickimpreza nie jest odpalana. Porównać:

Działa to w przypadku środkowych kliknięć:

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

To nie działa dla środkowych kliknięć:

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

Jeśli nadal musisz śledzić środkowe kliknięcie za pomocą delegowania zdarzeń , jedynym sposobem, jak podano w odpowiednim bilecie jQuery , jest użycie mousedownlub mouseupzamiast tego. Tak jak to:

Działa to w przypadku delegowanych kliknięć środkowych:

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

Zobacz to online tutaj .