Menu kliknięcia prawym przyciskiem myszy JavaScript

Menu kontekstowe lub menu prawym przyciskiem myszy otwiera się, gdy użytkownik kliknie prawym przyciskiem myszy na stronie internetowej. Czasami programiści mogą wymagać rozszerzenia domyślnego menu kontekstowego, ale nie są w stanie tego zrobić. Tak więc programiści tworzą swoje niestandardowe menu. Niestandardowe menu kontekstowe daje opcję dodawania unikalnych funkcji i pomaga witrynie lub stronie internetowej wyglądać bardziej dostosowująco do kontekstu.

To badanie wykaże menu przycisku prawym przyciskiem myszy i sposób utworzenia niestandardowego kliknięcia prawym przyciskiem myszy w JavaScript.

Jakie jest domyślne menu kliknięcia prawym przyciskiem myszy na stronie internetowej?

Po kliknięciu strony internetowej z prawym przyciskiem myszy pojawia się pole z różnymi opcjami menu, nazywa się menu kliknięcia prawym przyciskiem myszy lub domyślnym menu kontekstowym:

Zobaczmy przykład, jak utworzyć niestandardowe menu prawym przyciskiem myszy na stronie internetowej.

Tworzenie niestandardowego kliknięcia prawym przyciskiem myszy za pomocą JavaScript
Utworzymy prostą stronę internetową z HTML i CSS, a następnie utworzymy niestandardowe menu prawym przyciskiem myszy na stronie internetowej za pomocą JavaScript. Będziemy ustawić i stylizować nasze niestandardowe menu przycisku prawym przyciskiem myszy za pomocą właściwości CSS:

Menu kliknięcia prawym przyciskiem myszy JavaScript

Aby uzyskać niestandardowe menu kontekstowe, kliknij w dowolnym miejscu na stronie

Następnie napisz kod niestandardowego menu prawym przyciskiem myszy w pliku JavaScript. Najpierw ukryj lub zablokuj domyślne menu kontekstowe na stronie internetowej.

• Zadzwoń do "PreventDefault ()„Metoda, która uniemożliwia domyślne menu przycisku prawym przyciskiem myszy podczas uruchamiania„menu kontekstowe" wydarzenie.
• Wywołać zdefiniowaną funkcję o nazwie „CreateMenuOnrightclick ()”Aby uzyskać niestandardowe menu przycisku prawym przyciskiem myszy za pomocą„mi.Clientx" I "mi.klient”Argumenty pokazujące pozycję myszy:

_CurrentMenuvisible = null;
dokument.addEventListener („contextMenu”, e =>
mi.PreventDefault ();
CreateMenuOnrightclick (e.ClientX, e.klient);
);

Zdefiniuj funkcję „CreateMenuOnrightclick ()”, Który zostanie uruchomiony po prawym przyciskiem myszy użytkownika na stronie:

funkcja CreateMenuOnrightClick (x, y)
closetheopenedmenu ();
const menuelement = dokument.createElement („div”);
Menuelement.Lista klas.add („contextMenu”);
const Menulistelement = dokument.createElement („ul”);
const meneArray = [„odśwież”, „Open”, „save”, „copy”, „help”];
dla (var element menuArray)
var ListElement = Dokument.createElement („li”);
ListElem.innerHtml = '' + element + '';
Menalistelement.appendChild (ListElement);

Menuelement.appendchild (Menalistelement);
dokument.ciało.appendchild (menuelement);
_Currentmenuvisible = Menuelement;
Menuelement.styl.display = „blok”;
Menuelement.styl.lewy = x + „px”;
Menuelement.styl.top = y + „px”;

Zejdźmy na to, co dzieje się w kodzie wspomnianym powyżej:

• Po kliknięciu prawym przyciskiem prawym prawym prawym jest zamknięcie każdego innego kliknięcia prawym przyciskiem myszy lub kontekstu, które są obecnie otwarte na stronie.
• Następnie tworzymy nowy „div”, Który będzie gospodarzem niestandardowego kliknięcia prawym przyciskiem myszy.
• Następnie w „„div”, Dodano nieo uporządkowaną listę, która zawiera szereg list, które pojawiają się jako menu na stronie internetowej.

Aby zamknąć menu kontekstowe, kliknij w dowolnym miejscu na stronie internetowej. Będzie to obsługiwane za pomocą „Kliknij„Wydarzenie, które zostanie uruchomione, gdy użytkownik kliknie na stronie internetowej po otwarciu menu przycisku prawym przyciskiem myszy. Ten obsługi zdarzeń wywołuje określoną funkcję „closetheopenedmenu ()”:

dokument.addEventListener („kliknij”, e =>
closetheopenedmenu ();
);

Teraz zdefiniuj funkcję „closetheopenedmenu ()„Aby zamknąć menu prawym przyciskiem myszy, w którym zadzwoń do„CloseContextMenu ()„Metoda, która zamknie menu:

funkcja ClosetheOpeneDmenu ()
if (_CurrentMeNuvisible !== null)
CloseContextMenu (_CurrentMenuvisible);

„„CloseContextMenu ()„Metoda jest zdefiniowana poniżej:

funkcja CloseContextMenu (menu)
menu.styl.left = '0px';
menu.styl.top = '0px';
dokument.ciało.resuseChild (menu);
_CurrentMenuvisible = null;

Aby stylizować menu kontekstowe lub menu prawym przyciskiem myszy, zastosuj CSS do różnych elementów, aby wyglądał dobrze. Najpierw dodaj styl do znacznika ciała, aby wyrównać tekst na środku i ustaw kolor tła:

ciało
Text-Align: Center;
Tło: #B7C4F1;

Styl menu, ustawiając kolor tekstu, kolor tła, granicę i pozycję, aby „absolutny”:

.menu kontekstowe
Pozycja: absolutna;
szerokość: 100px; Wysokość: auto;
Kolor: #B7C4F1;
Tło: #344683;
Border: 1px Solid #344683;
Nie wyświetla się;

Styl lista nieopisana z elementami listy, aby ustawić wyściółkę i margines:

.contextMenu ul
Wyściółka: 0;
Margines: 0;

.contextMenu ul li
Bottom graniczny: #B7C4F1 1PX Solid;
Wyściółka: 0;
Margines: 0;

Ustaw granicę ostatniej opcji menu za pomocą „Bottom graniczny„Własność, która nie będzie żadna;

.contextMenu ul li: last-dziecko
Bottom graniczny: Brak;

Styl menu za pomocą znacznika kotwicy.

.kontekstmenu ul li a
Text-Align: lewy;
Blok wyświetlacza;
Wyściółka: 5px 10px;
Kolor: #B7C4F1;
Tekst-transform: kapitalizacja;
Dekoracja tekstu: Brak;

Ustaw kolor tła elementów listy na zawisie:

.contextMenu ul li a: hover
Tło: #2777ff;

Jak widać na wyjściu, kliknięcie strony internetowej z prawym przyciskiem myszy wyświetla niestandardowe menu przycisku prawym przyciskiem myszy:

Wniosek

Ponieważ domyślne menu kontekstowe nie można rozwinąć, aby dodać niestandardowe opcje, dlatego należy utworzyć niestandardowe menu przycisku prawym przyciskiem myszy, aby zapewnić niestandardowe opcje dla użytkownika. Niestandardowe menu przycisku prawym przyciskiem myszy można łatwo utworzyć przy bieżącej pozycji myszy za pomocą JavaScript i CSS. W tym poście na blogu utworzono niestandardowe menu przycisku prawym przyciskiem myszy, a procedura została wyjaśniona krok po kroku.