Не нажимается меню мышью в браузере. Обработка нажатия правой кнопки мыши (oncontextmenu). Что есть контекстное меню

Контекстное меню – это меню, которое появляется при клике правой кнопкой мыши по экрану. Обычно такие меню используются для упрощения выполнения избранных действий, вроде сортировки папок и файлов, открывания нового окна приложения или доступа к настройкам системы.

Многие годы термин «контекстное меню» относится в первую очередь к нативным приложениям. Однако теперь у нас есть возможность извлечь из него преимущества и в веб-приложениях. В качестве примера можно привести менеджер файлов в Gmil. Это меню реализовано при помощи кода javascript:

В будущем у нас будет возможность создавать контекстные меню для сайтов, основанных на HTML5. Предлагаем вам познакомиться с этим подходом.

Разработка контекстного меню

HTML5 представил нам 2 новых элемента: menu и menuitem, и они позволяют вам создавать контекстные меню. Для того чтобы браузер расценивал элемент menu как «контекстное меню», нам нужно установить тип меню как context, а также задать ему уникальный ID.

Ниже представлен пример, в котором мы создаем контекстное меню с этими свойствами.

У нас также остается возможность добавлять подменю, разветвляя элемент menu следующим образом:

Теперь, для того, чтобы контекстное меню появилось на экране при клике правой кнопкой мыши, мы используем новый HTML-атрибут под названием contextmenu. Этот атрибут используется для того, чтобы определять меню с указанным ID. Учитывая наш вышеприведенный пример, мы можем определить наше контекстное меню при помощи contextmenu=context-menu-id.

Мы можем задать атрибут в тэге body, если хотим использовать контекстное меню на всей странице. Мы также можем добавить его в HTML-элемент, чтобы данное меню использовалось исключительно внутри данного элемента.

Теперь новое контекстное меню появится внутри меню Operating System, как видно на примере ниже.

Добавляем иконку

Уверены, что многие из вас видели контекстные меню, в которых используются иконки. В некоторых случаях иконка может стать отличным визуально вспомогательным элементом, который помогает пользователям найти меню. Вдобавок он также дает пользователям возможность понять, для чего предназначено данное меню.

Мы также можем добавить иконку в наше контекстное меню на HTML5 при помощи атрибута icon:

Вот что мы увидим в окне браузера.

Заставляем меню работать

На данном этапе наше новое контекстное меню не будет работать при нажатии. Однако мы можем очень просто привести его в чувства посредством небольшого кода javascript. В нашем примере меню называется Email Selection. Это меню позволяет пользователям отправлять выделенный текст по электронной почте.

Чтобы оно заработало, давайте добавим функцию, которая позволит пользователям использовать выделенный код.

Function getSelectedText() {
var text = "";
if(window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
};
Затем мы создаем еще одну функцию, предположим sendEmail(), которая открывает email-клиент. Темой письма будет введенный текст из заголовка документа, а тело письма будет заполнено выделенным текстом.

Function sendEmail() {
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Наконец, мы добавляем эту функцию в наше меню посредством атрибута onclick.

Email Selection
Ранее мы уже рассказывали вам о том, как использовать HTML5 EditableContent, который позволяет нам редактировать веб-контент прямо на странице. Мы можем использовать данную функцию, добавив ее в наше меню под названием “Edit Content”.

В завершение

Лично мы очень обрадовались этой новой функции. Мы видим в ней множество возможностей. К сожалению, на момент написания данного материала, только Firefox поддерживал это свойство. Надеемся, что и другие браузеры скоро к нему подключатся.

Ниже можно просмотреть демо (работает только в Firefox).

В данном уроке мы рассмотрим редко упоминаемую фишку HTML5 - contextmenu . Может быть, вы никогда раньше не слышали про такое меню, но в некоторых ситуациях оно может оказаться чрезвычайно полезным.

Для чего может быть предназначен атрибут contextmenu ? Он позволяет добавлять различные опции в контекстное меню браузера, которое выводится по нажатию правой кнопки мыши, с помощью всего лишь нескольких строк кода HTML даже тогда, когда Javascript отключен. Хотя на текущий момент такой удобный инструмент доступен только в Firefox.

Вот как он работает:

Использовать contextmenu гораздо проще, чем может показаться на первый взгляд. Нужно добавить атрибут contextmenu:

Затем создаем меню:

Атрибут id должен соответствовать атрибуту contextmenu . Таким образом, возможно использовать разные контекстные меню для разных частей страницы.

Затем добавляем пункты меню. Сначала вставляем пункт меню с текстом и иконкой, затем добавляем ссылку для трансляции ткущей страницы в Facebook, а в финале вставляем ссылку для обновления страницы. Получается контекстное меню с тремя пунктами:

Также можно создавать подменю:

Очень интересное и полезное свойство HTML5. Но, его применение ограничивается только браузером Firefox.

Работоспособность всех устройств. При сбоях, поломках не всегда нужно вызывать специалистов, оплачивая их услуги подчас по довольно высоким расценкам. Многие недоработки, ошибки можно исправить самостоятельно. К такого рода сбоям, ошибкам относится, когда правая кнопка мыши не открывает контекстное меню. Как поступать в таких случаях?

Вначале следует выяснить, почему происходит сбой в работе, почему не работает контекстное меню Windows 10. Здесь возможны несколько причин:

захламлённость реестра устаревшими файлами;
отсутствие программ, включённых в контекстное меню, их нестабильная работа.

Рассмотрим, что делать в этих случаях, как изменить ситуацию, когда не открывается контекстное меню правой кнопкой мыши.

Если не появляется контекстное меню по правой кнопке из-за захламлённости реестра устаревшими файлами, рекомендуем для очистки воспользоваться утилитой, например, Glary Utilities. Glary Utilities представляет собой комплект системных твикеров, утилит, способствующих защите, тонкой настройке, повышению производительности ПК. С помощью набора можно удалить ненужные файлы , засоряющие систему, записи в реестре, давно устаревшие, оптимизировать оперативку, управлять автозагрузкой, оптимизировать память и иные функции, полезные для хорошего функционирования компьютера. Glary Utilities можно скачать бесплатно.

Проставив настройки, очистите ваше устройство от ненужных файлов посредством этой же утилиты, почистите реестр , тем самым увеличив быстродействие компьютера.

Исправление ошибки зависания

Если при нажатии ПКМ на файл, папку, не работает контекстное меню на рабочем столе, компьютер зависает, клавиша не реагирует на команды, можно устранить это зависание двумя способами, советуем выполнить оба последовательно. Прежде чем приступать к любому из них, нужно иметь права администратора . Вам придётся работать с реестром, здесь надо быть осторожным, при неправильных действиях система может отказать. Поэтому, приступая к процессу исправления сбоев, создайте непременно точку восстановления системы, прежде чем что-либо удалите.

«Глухое» зависание вызывается, как правило, нестабильно работающей программой, зависшей программой либо когда ссылка в контекстном меню, указывает на ресурс несуществующий.

Способ первый

Выполняйте последовательно шаги:

Проверьте появившейся список на наличие удалённых уже вами программ.
Если есть в списке программа, которую вы удаляли, уберите её из реестра. Перед удалением любого раздела реестра рекомендуем создавать его архивную копию для сохранения на случай необходимости восстановить.

Способ второй

Алгоритм при втором способе, когда у вас не открывается контекстное меню Windows 10, будет следующим.

Откройте редактор реестра, как описывалось в пунктах 1–2 предыдущего способа.
Откройте подраздел HKEY_CLASSES_ROOT,
В нем увидите несколько подразделов с названиями, как «name_programm.exe», «name_programm.dll». Поочерёдно проверьте каждый, кликая ЛКМ, до подраздела «command». Все подразделы должны открываться. Если не открывается, в правой части окна смотрите наличие параметра «NoOpenWith». Нет такого параметра - создайте его. Для чего выполните действия:

Найдя подраздел «command», кликните ЛКМ, проверьте наличие в правой части параметра «(По умолчанию)». В параметре должен быть прописан на приложение либо сетевой ресурс, существующие в компьютере.

Если параметр ссылается на отсутствующий уже ресурс, удалить следует весь раздел, начинающийся с названия этого ресурса, программы. Не забудьте перед удалением создать архивную копию для восстановления при необходимости. Удаляете, кликнув по названию раздела ПКМ, затем нажав «Удалить» - «Да».

После выполненных двух способов, контекстное меню должно открыться, ПК перестанет зависать при кликах ПКМ на файл.

Наладить работу контекстного меню несложно, только помните, что любые попытки изменить реестр могут привести к нестабильной работе ПК, потому не забывайте создавать точки восстановления , архивные копии удаляемых программ. Когда правая кнопка мыши не открывает контекстное меню, выполняйте последовательно инструкции выше, примените все способы, ошибка будет исправлена.

З амечали ли вы, что щелчки правой кнопкой мыши по картинкам на некоторых сайтах ни к чему не приводят. Кажется, будто кнопка щелкает вхолостую, а браузеру нет до неё никакого дела – «завис и думает». В действительности же браузер просто блокирует клики, получив такую команду из JavaScript-сценария загруженной страницы.

Как же разблокировать правую кнопку , чтобы кликнув по картинке, сохранить её для просмотра в офф-лайне? В большинстве интернет-обозревателей для этого достаточно «покопаться» в расширенных настройках JavaScript .. Итак…

Если у Вас «Opera »:
1. Проследуйте по пути «Инструменты» -> «Общие настройки»;
2. В появившемся окошке остановитесь на пункте «Содержимое» и отыщите кнопку «Настроить JavaScript» (см.рис.1).

3. Кликнув по ней, вызовите окошко детальных настроек JavaScript и уберите галочку напротив строки «Блокировать правую кнопку».
После подтверждения (нажатия на «Ok») эта кнопка станет «свободной» для вызовов контекстного меню. Кстати в «FireFox » для разблокировки правой кнопки нужно снять галочку именно возле такого пункта (см. рис.2).

В других же продвинутых браузерах блокировка правой кнопки снимается аналогично – через те же расширенные настройки JavaScript.

Веб-приложения на сегодняшний день становятся новым шагом на пути развития веба. Это уже далеко не обычные информационные сайты. В качестве примера передовых веб-приложений можно привести Gmail и Dropbox. С ростом функциональности, доступности и полезности веб-приложений растет и потребность в увеличении эффективности их использования. В данном руководстве будет рассмотрено создание такой полезной штуки, как собственное контекстное меню, и в частности:

Разберемся, что такое контекстное меню и зачем оно нужно.
Реализуем свое контекстное меню, используя JS и CSS.
Затронем недостатки и ограничения используемого подхода, чтобы знать, какие проблемы могут нас предостерегать при выкатывании всего этого в продакшн.

Что есть контекстное меню?

Если верить Википедии , контекстное меню - меню, появляющееся при взаимодействии пользователя с графическим интерфейсом (при нажатии правой кнопки мыши). Контекстное меню содержит ограниченный набор возможных действий, который обычно связаны с выбранным объектом.

На вашем компьютере клик правой кнопкой мыши на рабочем столе вызовет контекстное меню операционной системы. Отсюда вы, вероятно, можете создать новую папку, получить какую-то информацию и сделать что-нибудь еще. Контекстное меню в браузере позволяет, например, получить информацию о странице, посмотреть ее исходники, сохранить изображение, открыть ссылку в новой вкладке, поработать с буфером обмена и всякое такое. Причем набор доступных действий зависит от того, куда именно вы кликнули, то есть от контекста. Это стандартное поведение, закладываемое разработчиками браузера [И расширений к нему ].

Веб-приложения постепенно начинают заменять стандартные контекстные меню своими собственными. Отличными примерами являются все те же Gmail и Dropbox. Вопрос лишь в том, как сделать свое контекстное меню? В браузере при клике правой кнопкой мыши срабатывает событие contextmenu. Нам придется отменить поведение по умолчанию и сделать так, чтобы вместо стандартного меню выводилось наше собственное. Это не так уж сложно, но разбираться будем пошагово, так что выйдет довольно объемно. Для начала создадим базовую структуру приложения, чтоб разрабатываемый пример не был совсем уж оторван от реальности.

Список задач

Представим, что мы создаем приложение, позволяющее вести список задач. Я понимаю, вы уже наверняка неимоверно устали от всех этих списков задач, но пусть будет. Страница приложения содержит список незавершенных задач. Для каждой задачи доступен типичный набор действий CRUD: получить информацию о задаче, добавить новую, редактировать, удалить.

От переводчика
Перевод местами достаточно вольный, но не в ущерб смыслу или содержанию. Все, что не относится напрямую к оригиналу, вынесено в примечания.
С предложениями, пожеланиями и замечаниями, как обычно, в ЛС.

Тематические материалы: