Obsługa kliknięcia prawym przyciskiem myszy (w menu kontekstowym). Menu kontekstowe w przeglądarce korzystającej z HTML5. Menu wyświetlane po kliknięciu prawym przyciskiem myszy nie otwiera się

Czy zauważyłeś, że kliknięcia kliknij prawym przyciskiem myszy Klikanie na zdjęcia na niektórych stronach do niczego nie prowadzi. Wygląda na to, że przycisk klika bezczynnie, a przeglądarka się tym nie przejmuje – „zawiesza się i myśli”. W rzeczywistości przeglądarka po prostu blokuje kliknięcia po otrzymaniu takiego polecenia ze skryptu JavaScript ładowanej strony.

Jak odblokuj prawy przycisk kliknąć zdjęcie i zapisać je do przeglądania w trybie offline? W większości przeglądarek internetowych wystarczy „zagłębić się” w ustawienia zaawansowane JavaScript.. Więc…

Jeśli masz " Opera»:
1. Podążaj ścieżką „Narzędzia” -> „Ustawienia ogólne”;
2. W wyświetlonym oknie zatrzymaj się na pozycji „Treść” i znajdź przycisk „Konfiguruj JavaScript” (patrz rys. 1).

3. Klikając na niego, otwórz okno szczegółowych ustawień JavaScript i odznacz pole obok linii „Zablokuj prawy przycisk”.
Po potwierdzeniu (kliknięcie „OK”) przycisk ten stanie się „wolny” do wywołania menu kontekstowego. Swoją drogą, w „ FireFox„Aby odblokować prawy przycisk, należy odznaczyć pole obok tej pozycji (patrz rys. 2).

W innych zaawansowanych przeglądarkach blokowanie prawego przycisku usuwa się w ten sam sposób - poprzez te same zaawansowane ustawienia JavaScript.

Aplikacje internetowe stają się dziś nowym krokiem w kierunku rozwoju sieci. Nie są to zwykłe serwisy informacyjne. Przykładami zaawansowanych aplikacji internetowych są Gmail i Dropbox. Wraz ze wzrostem funkcjonalności, dostępności i użyteczności aplikacji internetowych rośnie potrzeba zwiększania efektywności ich wykorzystania. W tym przewodniku omówimy tworzenie tak przydatnej rzeczy, jak własna menu kontekstowe, i w szczególności:

Zastanówmy się, czym jest menu kontekstowe i dlaczego jest potrzebne.
Zaimplementujmy własne menu kontekstowe przy użyciu JS i CSS.
Porozmawiajmy o niedociągnięciach i ograniczeniach zastosowanego podejścia, aby dowiedzieć się, jakie problemy mogą nas ostrzec podczas wdrażania tego wszystkiego do produkcji.

Co to jest menu kontekstowe?

Według Wikipedii menu kontekstowe to menu, które pojawia się podczas interakcji użytkownika interfejs graficzny(po kliknięciu prawym przyciskiem myszy). Menu kontekstowe zawiera ograniczony zestaw możliwe działania, które są zwykle skojarzone z wybranym obiektem.

Na komputerze kliknięcie pulpitu prawym przyciskiem myszy spowoduje wyświetlenie menu kontekstowego system operacyjny. Stąd prawdopodobnie możesz utworzyć nowy folder, uzyskać informacje i zrobić coś innego. Menu kontekstowe przeglądarki pozwala na przykład uzyskać informacje o stronie, wyświetlić jej źródła, zapisać obraz, otworzyć link w nowej karcie, pracować ze schowkiem i tak dalej. Co więcej, zestaw dostępnych akcji zależy od tego, gdzie dokładnie kliknąłeś, czyli od kontekstu. Jest to standardowe zachowanie zamierzone przez twórców przeglądarek [ I rozszerzenia do niego].

Aplikacje internetowe stopniowo zaczynają zastępować standardowe menu kontekstowe własnymi. Świetnymi przykładami są Gmail i Dropbox. Pytanie tylko brzmi: jak stworzyć własne menu kontekstowe? W przeglądarce kliknięcie prawym przyciskiem myszy powoduje wyzwolenie zdarzenia menu kontekstowego. Będziemy musieli zastąpić domyślne zachowanie i sprawić, by wyświetlało nasze własne zamiast standardowego menu. Nie jest to aż takie trudne, ale przejdziemy przez to krok po kroku, więc będzie dość obszerne. Najpierw stwórzmy podstawowa struktura aplikacji, tak aby opracowywany przykład nie był całkowicie oderwany od rzeczywistości.

Lista zadań

Wyobraźmy sobie, że tworzymy aplikację, która pozwala nam na prowadzenie listy zadań. Rozumiem, że prawdopodobnie jesteś już niesamowicie zmęczony tymi wszystkimi listami zadań, ale niech tak będzie. Strona aplikacji zawiera listę niedokończonych zadań. Dla każdego zadania dostępny jest typowy zestaw akcji CRUD: pobierz informacje o zadaniu, dodaj nowe, edytuj, usuń.

Od tłumacza
Tłumaczenie jest miejscami dość dowolne, ale nie ze szkodą dla znaczenia i treści. W przypisach ujęto wszystko, co nie nawiązuje bezpośrednio do oryginału.
Sugestie, życzenia i uwagi jak zwykle na PW.

Działanie wszystkich urządzeń. W przypadku awarii czy awarii nie zawsze konieczne jest wzywanie specjalistów, czasami płacąc za ich usługi dość wysokimi cenami. Wiele niedociągnięć i błędów można naprawić samodzielnie. Tego typu awarie i błędy obejmują nieotwieranie menu kontekstowego prawym przyciskiem myszy. Co zrobić w takich przypadkach?

Najpierw powinieneś dowiedzieć się, dlaczego praca działa nieprawidłowo, dlaczego kontekstowość Menu systemu Windows 10. Istnieje kilka możliwych przyczyn:

bałagan w rejestrze z nieaktualnymi plikami;
brak programów znajdujących się w menu kontekstowym, ich niestabilne działanie.

Zastanówmy się, co zrobić w takich przypadkach, jak zmienić sytuację, gdy menu kontekstowe wyświetlane prawym przyciskiem myszy nie otwiera się.

Jeśli menu kontekstowe wyświetlane po kliknięciu prawym przyciskiem myszy nie pojawia się z powodu zaśmiecenia rejestru nieaktualnymi plikami, zalecamy skorzystanie z narzędzia takiego jak Glary Utilities w celu jego wyczyszczenia. Glary Utilities to zestaw narzędzi poprawiających system, które pomagają chronić, strojenie, zwiększając wydajność komputera. Za pomocą zestawu możesz usunąć niepotrzebne pliki zapychające system, wpisy rejestru od dawna nieaktualne, zoptymalizować pamięć RAM, zarządzać uruchamianiem, zoptymalizować pamięć i inne funkcje przydatne dla dobrego funkcjonowania komputera. Glary Utilities można pobrać bezpłatnie.

Po skonfigurowaniu ustawień wyczyść urządzenie z niepotrzebne pliki Za pomocą tego samego narzędzia wyczyść rejestr, zwiększając w ten sposób wydajność komputera.

Poprawka błędu zamrażania

Jeśli po kliknięciu pliku lub folderu prawym przyciskiem myszy menu kontekstowe na pulpicie nie działa, komputer zawiesza się, klawisz nie reaguje na polecenia, możesz naprawić to zawieszanie się na dwa sposoby, zalecamy wykonanie obu po kolei. Przed rozpoczęciem któregokolwiek z nich musisz mieć uprawnienia administratora. Będziesz musiał pracować z rejestrem, musisz zachować ostrożność, jeśli zrobisz to niepoprawnie, system może zawieść. Dlatego rozpoczynając proces naprawy awarii, pamiętaj o utworzeniu punktu przywracania systemu przed usunięciem czegokolwiek.

„Ciche” zawieszenie jest zwykle spowodowane niestabilnym programem, zamrożonym programem lub łączem w menu kontekstowym wskazującym na nieistniejący zasób.

Metoda pierwsza

Wykonaj kolejno kroki:

Sprawdź listę, która się pojawi, pod kątem obecności programów, które już usunąłeś.
Jeżeli na liście znajduje się program, który usunąłeś, usuń go z rejestru. Przed usunięciem dowolnego klucza rejestru zalecamy utworzenie jego kopii archiwalnej, aby zapisać ją na wypadek konieczności jego przywrócenia.

Metoda druga

Algorytm drugiej metody, gdy menu kontekstowe systemu Windows 10 nie otwiera się, będzie następujący.

Otwórz edytor rejestru zgodnie z opisem w krokach 1–2 poprzedniej metody.
Otwórz podklucz HKEY_CLASSES_ROOT,
Zobaczysz w nim kilka podsekcji o nazwach takich jak „nazwa_programm.exe”, „nazwa_programu.dll”. Sprawdź każdy z nich po kolei, klikając LMB, aż do podsekcji „polecenie”. Wszystkie podsekcje powinny się otworzyć. Jeśli się nie otworzy, poszukaj po prawej stronie okna obecności parametru „NoOpenWith”. Nie ma takiego parametru - utwórz go. Aby to zrobić, wykonaj następujące kroki:

Po znalezieniu podsekcji „polecenie” kliknij LMB i sprawdź obecność parametru „(Domyślny)” po prawej stronie. Parametr należy określić dla aplikacji lub zasób sieciowy, istniejący w komputerze.

Jeżeli parametr dotyczy zasobu, którego już brakuje, należy usunąć całą sekcję zaczynającą się od nazwy tego zasobu lub programu. Przed usunięciem nie zapomnij utworzyć kopii archiwalnej w celu przywrócenia, jeśli to konieczne. Usuń, klikając nazwę sekcji RMB, a następnie klikając „Usuń” - „Tak”.

Po wykonaniu dwóch metod powinno otworzyć się menu kontekstowe, komputer nie będzie już zawieszał się po kliknięciu pliku prawym przyciskiem myszy.

Konfiguracja menu kontekstowego nie jest trudna, pamiętaj tylko, że wszelkie próby zmiany rejestru mogą prowadzić do niestabilnej pracy komputera, dlatego nie zapomnij utworzyć punktów przywracania, czyli zarchiwizowanych kopii usuniętych programów. Gdy prawym przyciskiem myszy nie otworzy się menu kontekstowe, postępuj zgodnie z powyższymi instrukcjami, zastosuj wszystkie metody, błąd zostanie naprawiony.

Menu kontekstowe to menu, które pojawia się po kliknięciu ekranu prawym przyciskiem myszy. Zwykle tego typu menu służą ułatwieniu wykonywania ulubionych czynności, takich jak sortowanie folderów i plików, otwieranie nowego okna aplikacji czy uzyskiwanie dostępu do ustawień systemowych.

Przez wiele lat termin „menu kontekstowe” odnosił się przede wszystkim do aplikacji natywnych. Jednak teraz mamy możliwość wykorzystania go także w aplikacjach internetowych. Przykładem jest menedżer plików w Gmil. To menu jest zaimplementowane przy użyciu kodu JavaScript:

W przyszłości będziemy mogli tworzyć menu kontekstowe dla witryn opartych na HTML5. Zapraszamy do zapoznania się z tym podejściem.

Rozwój menu kontekstowego

HTML5 wprowadził nas do 2 nowych elementów: menu i menuitem, które pozwalają na tworzenie menu kontekstowych. Aby przeglądarka traktowała element menu jako „menu kontekstowe”, musimy ustawić typ menu na kontekstowe, a także nadać mu unikalny identyfikator.

Poniżej znajduje się przykład, w którym tworzymy menu kontekstowe z tymi właściwościami.

Nadal mamy możliwość dodawania podmenu poprzez rozgałęzianie elementu menu w następujący sposób:

Teraz, aby menu kontekstowe pojawiło się na ekranie po kliknięciu prawym przyciskiem myszy, używamy nowego atrybutu HTML zwanego menu kontekstowym. Ten atrybut służy do identyfikacji menu o określonym identyfikatorze. Biorąc pod uwagę nasz przykład powyżej, możemy zdefiniować nasze menu kontekstowe za pomocą menu kontekstowego=context-menu-id.

Możemy ustawić atrybut w tagu body, jeśli chcemy korzystać z menu kontekstowego na całej stronie. Możemy również dodać go do elementu HTML, aby tak było to menu został użyty wyłącznie w obrębie tego elementu.

Teraz w menu System operacyjny pojawi się nowe menu kontekstowe, jak pokazano w poniższym przykładzie.

Dodanie ikony

Jesteśmy pewni, że wielu z Was widziało menu kontekstowe wykorzystujące ikony. W niektórych przypadkach ikona może być świetną pomocą wizualną pomagającą użytkownikom znaleźć menu. Ponadto pozwala także użytkownikom zrozumieć, do czego służy menu.

Możemy również dodać ikonę do naszego menu kontekstowego HTML5 za pomocą atrybutu icon:

To właśnie zobaczymy w oknie przeglądarki.

Aby menu działało

Na tym etapie nasze nowe menu kontekstowe nie będzie działać po kliknięciu. Jednak bardzo łatwo możemy go przywołać do zmysłów mały kod JavaScript W naszym przykładzie menu nosi nazwę Wybór e-maila. To menu pozwala użytkownikom wysłać wybrany tekst pocztą elektroniczną.

Aby to działało, dodajmy funkcję, która pozwala użytkownikom używać stojącego za nim kodu.

Funkcja getSelectedText() (
var tekst = "";
if(window.getSelection) (
tekst = okno.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
tekst = dokument.wybór.createRange().text;
}
zwróć tekst;
};
Następnie tworzymy kolejną funkcję, powiedzmy sendEmail(), która otwiera klienta poczty e-mail. Tematem wiadomości e-mail będzie wprowadzony tekst z tytułu dokumentu, a treść wiadomości e-mail zostanie wypełniona wybranym tekstem.

Funkcja sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Na koniec dodajemy tę funkcjonalność do naszego menu za pomocą atrybutu onclick.

Wybór e-maila
O tym, jak korzystać z HTML5 EditableContent, który pozwala nam edytować treści internetowe bezpośrednio na stronie, pisaliśmy już wcześniej. Możemy użyć tę funkcję, dodając go do naszego menu o nazwie „Edytuj treść”.

Podsumowując

Osobiście bardzo nas to ucieszyło Nowa cecha. Widzimy w nim wiele możliwości. Niestety w momencie pisania tego materiału tylko Firefox obsługiwał tę właściwość. Mamy nadzieję, że wkrótce inne przeglądarki się z nią połączą.

Poniżej możesz obejrzeć demo (działa tylko w przeglądarce Firefox).

W tym samouczku przyjrzymy się rzadko wspominanej funkcji HTML5 - menu kontekstowemu. Być może nigdy wcześniej nie słyszałeś o tym menu, ale w niektórych sytuacjach może ono być niezwykle przydatne.

Do czego może służyć atrybut menu kontekstowego? Umożliwia dodanie różnych opcji do menu kontekstowego przeglądarki wyświetlanego po kliknięciu prawym przyciskiem myszy za pomocą zaledwie kilku linii kodu HTML, nawet jeśli JavaScript jest wyłączony. Chociaż w tej chwili to poręczne narzędzie dostępne tylko w Firefoksie.

Oto jak to działa:

Korzystanie z menu kontekstowego jest znacznie prostsze, niż mogłoby się wydawać na pierwszy rzut oka. Musisz dodać atrybut menu kontekstowego:

Następnie tworzymy menu:

Atrybut id musi odpowiadać atrybutowi menu kontekstowego. Dzięki temu możliwe jest użycie różnych menu kontekstowych dla różnych części strony.

Następnie dodajemy pozycje menu. Najpierw wstawiamy pozycję menu z tekstem i ikoną, następnie dodajemy link umożliwiający transmisję aktualnej strony na Facebooku, a na koniec wstawiamy link umożliwiający aktualizację strony. W rezultacie wyświetli się menu kontekstowe z trzema elementami:

Możesz także tworzyć podmenu:

Bardzo interesująca i przydatna właściwość HTML5. Jednak jego użycie ogranicza się tylko do przeglądarki Firefox.

Materiały tematyczne: