Jak uchwycić zdarzenie prawym przyciskiem myszy w JavaScript

Gdy użytkownik kliknie prawym przyciskiem myszy na stronie internetowej, pojawia się menu kontekstowe lub menu prawym przyciskiem myszy. Deweloperzy często muszą podjąć pewne działania, gdy użytkownik wykonuje kliknięcie prawym przyciskiem myszy w elemencie aplikacji internetowej. Dlatego muszą śledzić/przechwytywać prawym przyciskiem myszy na stronie internetowej.

Ten samouczek ilustruje procedurę przechwytywania zdarzenia prawym przyciskiem myszy w JavaScript.

Jak uchwycić zdarzenie prawym przyciskiem myszy w JavaScript?

Użyj "okno.addEventListener ()„Metoda, przekazując wydarzenie”menu kontekstowe". Ilekroć użytkownik próbuje zainicjować menu kontekstowe, klikając odpowiedni przycisk myszy, zdarzenie ContextMenu jest uruchamiane.

Przykład 1: przechwytywanie zdarzenia kliknięcia prawym przyciskiem myszy za pomocą metody addEventListener () metodą alert ()

Aby uchwycić kliknięcie prawym przyciskiem myszy na stronie internetowej, użyj „okno.addEventListener ()”Metoda podłączenia/dodawania obsługi zdarzeń do elementu. Następnie pokaż wynik, że użytkownik kliknie prawym przyciskiem myszy na stronie za pomocą „alarm()" metoda. Wyświetli wiadomość w oknie dialogowym, które pojawi się na ekranie z „OK" przycisk:

okno.addEventListener („contextMenu”, (event) =>
alert („mysz kliknięta prawym przyciskiem myszy”);
);

Wyjście wyświetla komunikat ostrzegawczy, gdy klikamy prawym przyciskiem myszy stronę, a następnie otwiera domyślne menu kontekstowe:

Przykład 2: Przechwyć zdarzenie kliknięcia prawym przyciskiem myszy za pomocą metody addEventListener () z konsolą.Metoda log ()

Tutaj przechwycimy zdarzenie prawym przyciskiem myszy i wyprowadzimy wiadomość do konsoli:

okno.addEventListener („contextMenu”, (event) =>
konsola.log („Myszka kliknięta prawym przyciskiem myszy”);
);

Wyjście

Przykład 3: Ogranicz kliknięcie prawym przyciskiem myszy, aby wyświetlić domyślne menu

W tym przykładzie zobaczymy, że ograniczamy domyślne menu kontekstowe, które można otworzyć przy kliknięciu prawym przyciskiem myszy za pomocą „PreventDefault ()" metoda:

okno.addEventListener („contextMenu”, (event) =>
wydarzenie.PreventDefault ();
alert („mysz kliknij prawym przyciskiem myszy”);
);

Jak widać na wyjściu, domyślne menu kontekstowe nie pojawia się na myszy kliknij prawym przyciskiem myszy:

Przykład 4: Otwórz niestandardowe menu kontekstowe na myszy prawym przyciskiem myszy

Tutaj dane wyjściowe pokazuje niestandardowe menu kontekstowe w wydarzeniu kliknięcia prawym przyciskiem myszy. Mówiąc dokładniej, kliknij link, aby utworzyć niestandardowe menu kontekstowe:

Chodzi o uchwycenie wydarzenia prawym przyciskiem myszy w JavaScript.

Wniosek

Aby uchwycić zdarzenie prawym przyciskiem myszy w JavaScript, użyj „okno.addEventListener ()„Metoda, przekazując wydarzenie”menu kontekstowe". Wydarzenie ContextMenu jest wyzwalane, gdy użytkownik próbuje zainicjować menu kontekstowe, klikając odpowiedni przycisk myszy. W tym samouczku zilustrowaliśmy procedurę przechwytywania zdarzenia prawym przyciskiem myszy w JavaScript.