Wyzwalanie zdarzenia onclick za pomocą środkowego kliknięcia

90

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?

Sadesh Kumar N.
źródło
15
Nadal nie rozumiem, jak problem został rozwiązany, kiedy kliknięcie środkowym przyciskiem nie wywołuje zdarzenia onclick.
Tomáš Zato - Przywróć Monikę
3
@ TomášZato Przeglądarki nie uruchamiają zdarzenia „kliknięcia” środkowym kliknięciem, ale mogą wywołać zdarzenie „myszy”. Następnie framework javascript może powiązać to z akcją „kliknięcia”, aby zmylić Cię. Polecam lekturę unixpapa.com/js/mouse.html
rds

Odpowiedzi:

64

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.

Gausie
źródło
19
Pamiętaj, że .livezostał wycofany i usunięty na korzyść.on
Naftali aka Neal.
2
U mnie FF działa tylko ze zdarzeniem mousedown. Zdarzenie kliknięcia nazywa to scr.hu/1kig/su5c9
l00k
1
Czy jest na to jakaś stała między przeglądarkami 2?
fracz
11
To już nie działa w Chrome 55. Zobacz 1 , 2 i to pytanie
billc.cn,
1
Jak to jest rozwiązanie, gdy problem polegał na tym, że środkowe kliknięcie nie wyzwala na początku zdarzenia kliknięcia?
Drazen Bjelovuk
32

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 .

Hassan
źródło
uwaga: onauxclick zadziała, ale nie otworzy linku w nowej karcie ...
Jonathan Laliberte
2
To jedyna odpowiedź, która faktycznie działa w Chrome. Jeśli potrzebujesz zdarzenia „click” dla prawego przycisku myszy, możesz użyć „menu kontekstowego” (chociaż jest ono uruchamiane nie tylko prawym przyciskiem myszy): developer.mozilla.org/en-US/docs/Web/API/Element/ ...
Humpparitari
1
łącząc z powyższą odpowiedzią, możesz zapobiec przechwytywaniu prawym przyciskiem myszy przez if(event.button==1)klauzulę, jest to jedyna działająca odpowiedź.
Buddy
Zwróć uwagę, że musisz użyć zarówno auxclickzdarzenia, jak i sprawdzić wartość e.button == 1. Poprawiłem odpowiedź.
Flimm
26

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>

rahul
źródło
4
Polecam używanie, event.whichponieważ zostało ustandaryzowane w różnych przeglądarkach w źródle jQuery - wiersz 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 Jednak MouseEvent.whichnie jest zdefiniowany w żadnej specyfikacji, ale MouseEvent.buttonjest zdefiniowany w DOM L2 Events.
Oriol
@Oriol jest poprawny, ale zaimplementowany w różny sposób u różnych dostawców przeglądarek. OP oznaczył pytanie jQuery, dlatego zasugerowałem użycie, event.whichale powinienem był opracować, że MouseEvent.whichnie jest to część oficjalnej specyfikacji.
Russ Cam
@rahul, A co z myszami do gier z więcej niż 7 przyciskami? egg-tech.com/blog/images/mouse%20buttons.jpg
Pacerier
W rzeczywistości to nie działa w przeglądarkach takich jak Firefox czy Chrome, tylko w przypadku głównego kliknięcia. Zobacz 1 , 2 i to pytanie .
Flimm
8

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ć.

Tom Haflinger
źródło
1
ale co, jeśli masz zakładki na swojej stronie i chcesz zachowywać się tak samo jak w przeglądarce? middleclick powinno wtedy zamknąć istniejącą kartę.
cmxl
6

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.

żebrze
źródło
czy mogę zmienić funkcjonalność przeglądarki Mozilla !! np. po kliknięciu lewym przyciskiem otwiera wyskakujące okienko .... ale dla środkowego kliknięcia nie otwiera wyskakującego okienka i otwiera się nowa karta, w której wyskakujące okienko się nie otwiera ... więc chcę nadpisać funkcjonalność środkowego kliknięcia w mozilla ....
Sadesh Kumar N
Mozilla ma ustawienie, aby otwierać wszystkie wyskakujące okienka w nowej karcie zamiast w nowym oknie. Jeśli użytkownik ma włączoną tę opcję, nie sądzę , aby można było coś zrobić. Jeśli tak nie jest, co się dzieje, czy możesz opublikować kod lub link do strony z problemem?
rozpoczyna się
To nie działa w przeglądarkach takich jak Firefox i Chrome.
Flimm
6

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

Bastien Bast Weber
źródło
Nie chcę zakładać twojego przypadku użycia, ale założyłbym się, że wiele osób potrzebowałoby zamiast tego zdarzenia „mouseup”. Działa również ze środkowym przyciskiem myszy.
Bojidar Stanchev
Kiedy próbuję tego w przeglądarce Firefox i Chrome, nie zapobiega to domyślnemu zachowaniu otwierania łącza w nowej karcie, mimo że e.preventDefault()jest wywoływane.
Flimm
5

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ź

Naftali alias Neal
źródło
Zdarzenie clicknie działa dla środkowego przycisku myszy w przeglądarkach takich jak Firefox i Chrome.
Flimm
kiedyś @Flimm
Naftali aka Neal
Tak. Stack Overflow nie ma dobrego rozwiązania w przypadku nieaktualnych odpowiedzi. Obawiam się, że muszę zagłosować „w dół”, ponieważ „Ta odpowiedź nie jest już przydatna”. Co gorsza, przypięta odpowiedź może mieć setki lub tysiące głosów przeciw, ponieważ jest nieaktualna i pozostanie przypięta na zawsze, jeśli PO nie odpowie.
Flimm
Zadaj nowe pytanie :-) (odwołaj się do tego, mówiąc, że jest nieaktualny i chcesz odpowiedzi 2020). Ale może też można używać zdarzeń mousedown / mouseup?
Naftali aka Neal
Nawet jeśli to zrobię, ludzie tacy jak ja nadal będą natrafiać na tę odpowiedź, gdy przychodzą z wyszukiwarek, i będą zdezorientowani przez przypiętą błędną odpowiedź.
Flimm
3

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 .

skip405
źródło
Właściwie clicknie działa w przypadku środkowych kliknięć, jak w pierwszym przykładzie.
Flimm