Jak uzyskać kliknięty przycisk myszy za pomocą jQuery?
$('div').bind('click', function(){
alert('clicked');
});
jest to wywoływane przez kliknięcie prawym i lewym przyciskiem myszy, jaki jest sposób na złapanie prawego przycisku myszy? Byłbym szczęśliwy, gdyby istniało coś takiego:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
contextmenu
pochodzi z przeglądarki. w natywnym JavaScript możesz dołączyć dooncontextmenu
wydarzenia.Edycja : Zmieniłem go, aby działał dla dynamicznie dodawanych elementów za pomocą
.on()
jQuery 1.7 lub nowszego:Demo: jsfiddle.net/Kn9s7/5
[Początek oryginalnego postu] To działało dla mnie:
Jeśli jesteś w wielu rozwiązaniach ^^
Edycja : Tim Down podnosi dobrą rację, że nie zawsze będzie to,
right-click
co uruchamiacontextmenu
zdarzenie, ale także po naciśnięciu klawisza menu kontekstowego (który prawdopodobnie jest zamiennikiem aright-click
)źródło
contextmenu
odpalanie zdarzeń nie zawsze oznacza kliknięcie prawym przyciskiem myszy. Prawidłowe podejście to uzyskanie informacji o przycisku ze zdarzenia myszy (click
w tym przypadku).Możesz łatwo stwierdzić, który przycisk myszy został naciśnięty, sprawdzając
which
właściwość obiektu zdarzenia na zdarzeniach myszy:źródło
e.button==2
Zamiast tego używa się powyższej wtyczki jQuery .event.button
wielu przeglądarek to większy problem niżevent.which
event.button
różne liczby przycisków . Spójrz na ten artykuł od stycznia 2009 r. - unixpapa.com/js/mouse.htmlmouseup
zweryfikować, czy osoba naprawdę kliknęła element? Jest wiele razy, jeśli przypadkowo kliknę coś, jestem w stanie zapobiec kliknięciu, przytrzymując przycisk myszy i przeciągając poza element.mouseup
jest prawdopodobnie lepszym wydarzeniem, jest to tylko przykład użyciaevent.which
kliknięć przyciskiem myszyMożna również
bind
docontextmenu
ireturn false
:Próbny: http://jsfiddle.net/maniator/WS9S2/
Możesz też zrobić szybką wtyczkę, która robi to samo:
Demo: http://jsfiddle.net/maniator/WS9S2/2/
Za pomocą
.on(...)
jQuery> = 1.7:Demo: http://jsfiddle.net/maniator/WS9S2/283/
źródło
method.call(this, e);
zamiastmethod();
W ten sposób,method
pobiera poprawną wartość,this
a także poprawnie przekazuje obiekt zdarzenia.Zaktualizuj aktualny stan rzeczy:
źródło
event.which
została wprowadzona, co eliminuje zgodność między przeglądarkami.http://jsfiddle.net/SRX3y/8/
źródło
Istnieje wiele bardzo dobrych odpowiedzi, ale chcę tylko dotknąć jednej zasadniczej różnicy między IE9 a IE <9 podczas używania
event.button
.Zgodnie ze starą specyfikacją Microsoft
event.button
kody różnią się od używanych przez W3C. W3C rozpatruje tylko 3 przypadki:event.button === 1
event.button === 3
event.button === 2
Jednak w starszych przeglądarkach internetowych Microsoft przerzuca nieco wciśnięty przycisk i jest 8 przypadków:
event.button === 0
lub 000event.button === 1
lub 001event.button === 2
lub 010event.button === 3
lub 011event.button === 4
lub 100event.button === 5
lub 101event.button === 6
lub 110event.button === 7
lub 111Pomimo tego, że teoretycznie tak powinno to działać, żaden Internet Explorer nigdy nie obsługiwał przypadków jednoczesnego naciśnięcia dwóch lub trzech przycisków. Wspominam o tym, ponieważ standard W3C nie może nawet teoretycznie to poprzeć.
źródło
event.button === 0
który nie jest kliknięty, genialny IEಠ_ಠ
Wydaje mi się, że lekka adaptacja odpowiedzi TheVillageIdiot byłaby czystsza:
EDYCJA: JQuery zapewnia
e.which
atrybut, zwracający odpowiednio 1, 2, 3 dla lewego, środkowego i prawego kliknięcia. Więc możesz również użyćif (e.which == 3) { alert("right click"); }
Zobacz także: odpowiedzi na „Wyzwalanie zdarzenia kliknięcia za pomocą środkowego kliknięcia”
źródło
event.which === 1
zapewnia kliknięcie lewym przyciskiem (podczas korzystania z jQuery).Ale powinieneś również pomyśleć o klawiszach modyfikujących: ctrlcmdshiftalt
Jeśli chcesz tylko łapać proste, niezmodyfikowane kliknięcia lewym przyciskiem myszy, możesz zrobić coś takiego:
źródło
Jeśli szukasz „Lepszych zdarzeń myszy JavaScript”, które pozwalają
Spójrz na ten zwykły javascript w różnych przeglądarkach, który wyzwala powyższe zdarzenia i usuwa ból głowy. Po prostu skopiuj i wklej go w nagłówku skryptu lub dołącz do pliku w pliku
<head>
dokumencie. Następnie powiąż swoje zdarzenia, zapoznaj się z następnym blokiem kodu poniżej, który pokazuje jquery przykład przechwytywania zdarzeń i uruchamiania przypisanych im funkcji, chociaż działa to również z normalnym wiązaniem javascript.Jeśli chcesz zobaczyć, jak działa, zajrzyj na stronę jsFiddle: https://jsfiddle.net/BNefn/
Przykład zdarzenia Lepsze kliknięcie myszą (dla uproszczenia używa jquery, ale powyższe będzie działać w różnych przeglądarkach i uruchamiać te same nazwy zdarzeń, IE używa przed nimi)
A dla tych, którzy potrzebują zminimalizowanej wersji ...
źródło
źródło
źródło
Z jquery możesz korzystać
event object type
źródło
jest też sposób, aby to zrobić bez JQuery!
Sprawdź to:
źródło
źródło
Dla tych, którzy zastanawiają się, czy powinni używać
event.which
w waniliowym JS lub Angular : Teraz jest to przestarzałe, więc wolę używaćevent.buttons
zamiast tego.Uwaga: za pomocą tej metody i zdarzenia (mousedown) :
a zdarzenie (mouseup) NIE zwróci tych samych liczb, ale 0 zamiast tego.
Źródło: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
źródło
źródło