З
амечали ли вы, что щелчки правой кнопкой мыши по картинкам на некоторых сайтах ни к чему не приводят. Кажется, будто кнопка щелкает вхолостую, а браузеру нет до неё никакого дела – «завис и думает». В действительности же браузер просто блокирует клики, получив такую команду из JavaScript-сценария загруженной страницы.
Как же разблокировать правую кнопку , чтобы кликнув по картинке, сохранить её для просмотра в офф-лайне? В большинстве интернет-обозревателей для этого достаточно «покопаться» в расширенных настройках JavaScript .. Итак…
Если у Вас «Opera
»:
1. Проследуйте по пути «Инструменты» -> «Общие настройки»;
2. В появившемся окошке остановитесь на пункте «Содержимое» и отыщите кнопку «Настроить JavaScript» (см.рис.1).
3. Кликнув по ней, вызовите окошко детальных настроек JavaScript и уберите галочку напротив строки «Блокировать правую кнопку».
После подтверждения (нажатия на «Ok») эта кнопка станет «свободной» для вызовов контекстного меню. Кстати в «FireFox
» для разблокировки правой кнопки нужно снять галочку именно возле такого пункта (см. рис.2).
В других же продвинутых браузерах блокировка правой кнопки снимается аналогично – через те же расширенные настройки JavaScript.
В данном уроке мы рассмотрим редко упоминаемую фишку 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», кликните ЛКМ, проверьте наличие в правой части параметра «(По умолчанию)». В параметре должен быть прописан на приложение либо сетевой ресурс, существующие в компьютере.
- Если параметр ссылается на отсутствующий уже ресурс, удалить следует весь раздел, начинающийся с названия этого ресурса, программы. Не забудьте перед удалением создать архивную копию для восстановления при необходимости. Удаляете, кликнув по названию раздела ПКМ, затем нажав «Удалить» - «Да».
После выполненных двух способов, контекстное меню должно открыться, ПК перестанет зависать при кликах ПКМ на файл.
Наладить работу контекстного меню несложно, только помните, что любые попытки изменить реестр могут привести к нестабильной работе ПК, потому не забывайте создавать точки восстановления , архивные копии удаляемых программ. Когда правая кнопка мыши не открывает контекстное меню, выполняйте последовательно инструкции выше, примените все способы, ошибка будет исправлена.
Задача: отловить нажатие правой кнопки мыши в окне браузера и показать собственное контекстное меню.
Что происходит при нажатии правой кнопки мыши в окне браузера? Появится контекстное меню, внешний вид и набор функций которого будет зависеть от типа браузера и того места, куда вы кликнули.
А что, если мы захотели заблокировать браузерное контекстное меню и показать собственное? Возможно? Да. К сожалению не кроссбраузерно, но код приведенный ниже будет работать в Gecko, Safari и IE. Opera таких возможностей по умолчанию не предоставляет.
Для начала прорисуем три DIV-а, в 2-х из которых покажем собственное контекстное меню, а в третьем оставим дефолтное браузерное.
Как видите, отлов нажатия правой кнопки происходит с помощью события oncontextmenu . Для написания кода функции menu необходимы следующие составляющие:
– Функция для добавления обработчиков событий . Используется для скрытия собственного контекстного меню при кликах в других частях документа.
– Функция для определения координат указателя мыши . Используется для определения положения, в котором мы покажем контекстное меню.
Блокировать всплывание стандартного браузерного меню можно элементарно возвращая false.
Теперь код:
// Функция для определения координат указателя мыши
function defPosition(event) {
var x = y = 0 ;
if (document.attachEvent != null ) { // Internet Explorer & Opera
x = window.event .clientX + (document.documentElement .scrollLeft ? document.documentElement .scrollLeft : document.body .scrollLeft ) ;
y = window.event .clientY + (document.documentElement .scrollTop ? document.documentElement .scrollTop : document.body .scrollTop ) ;
} else if (!document.attachEvent && document.addEventListener ) { // Gecko
x = event.clientX + window.scrollX ;
y = event.clientY + window.scrollY ;
} else {
// Do nothing
}
return { x:x, y:y} ;
}
function
menu(type, evt)
{
// Блокируем всплывание события contextmenu
evt = evt || window.event
;
evt.cancelBubble
= true
;
// Показываем собственное контекстное меню
var
menu = document.getElementById
("contextMenuId"
)
;
var
html = ""
;
switch
(type)
{
case
(1
)
:
html = "Меню для первого ДИВа"
;
html += "
Первая функция"
;
html += "
Вторая функция"
;
html += "
Третья функция"
;
break
;
case
(2
)
:
html = "Меню для второго ДИВа"
;
html += "
(пусто)"
;
break
;
default
:
// Nothing
break
;
}
// Если есть что показать - показываем
if
(html)
{
menu.innerHTML
= html;
menu.style
.top
= defPosition(evt)
.y
+ "px"
;
menu.style
.left
= defPosition(evt)
.x
+ "px"
;
menu.style
.display
= ""
;
}
// Блокируем всплывание стандартного браузерного меню
return
false
;
}
// Закрываем контекстное при клике левой или правой кнопкой по документу
// Функция для добавления обработчиков событий
function
addHandler(object, event, handler, useCapture)
{
if
(object.addEventListener
)
{
object.addEventListener
(event, handler, useCapture ? useCapture: false
)
;
}
else
if
(object.attachEvent
)
{
object.attachEvent
("on"
+ event, handler)
;
}
else
alert
("Add handler is not supported"
)
;
}
addHandler(document, "contextmenu"
, function
()
{
}
)
;
addHandler(document, "click"
, function
()
{
document.getElementById
("contextMenuId"
)
.style
.display
= "none"
;
}
)
;
Веб-приложения на сегодняшний день становятся новым шагом на пути развития веба. Это уже далеко не обычные информационные сайты. В качестве примера передовых веб-приложений можно привести Gmail и Dropbox. С ростом функциональности, доступности и полезности веб-приложений растет и потребность в увеличении эффективности их использования. В данном руководстве будет рассмотрено создание такой полезной штуки, как собственное контекстное меню, и в частности:
- Разберемся, что такое контекстное меню и зачем оно нужно.
- Реализуем свое контекстное меню, используя JS и CSS.
- Затронем недостатки и ограничения используемого подхода, чтобы знать, какие проблемы могут нас предостерегать при выкатывании всего этого в продакшн.
Что есть контекстное меню?
Если верить Википедии , контекстное меню - меню, появляющееся при взаимодействии пользователя с графическим интерфейсом (при нажатии правой кнопки мыши). Контекстное меню содержит ограниченный набор возможных действий, который обычно связаны с выбранным объектом.На вашем компьютере клик правой кнопкой мыши на рабочем столе вызовет контекстное меню операционной системы. Отсюда вы, вероятно, можете создать новую папку, получить какую-то информацию и сделать что-нибудь еще. Контекстное меню в браузере позволяет, например, получить информацию о странице, посмотреть ее исходники, сохранить изображение, открыть ссылку в новой вкладке, поработать с буфером обмена и всякое такое. Причем набор доступных действий зависит от того, куда именно вы кликнули, то есть от контекста. Это стандартное поведение, закладываемое разработчиками браузера [И расширений к нему ].
Веб-приложения постепенно начинают заменять стандартные контекстные меню своими собственными. Отличными примерами являются все те же Gmail и Dropbox. Вопрос лишь в том, как сделать свое контекстное меню? В браузере при клике правой кнопкой мыши срабатывает событие contextmenu. Нам придется отменить поведение по умолчанию и сделать так, чтобы вместо стандартного меню выводилось наше собственное. Это не так уж сложно, но разбираться будем пошагово, так что выйдет довольно объемно. Для начала создадим базовую структуру приложения, чтоб разрабатываемый пример не был совсем уж оторван от реальности.
Список задач
Представим, что мы создаем приложение, позволяющее вести список задач. Я понимаю, вы уже наверняка неимоверно устали от всех этих списков задач, но пусть будет. Страница приложения содержит список незавершенных задач. Для каждой задачи доступен типичный набор действий CRUD: получить информацию о задаче, добавить новую, редактировать, удалить.От переводчика
Перевод местами достаточно вольный, но не в ущерб смыслу или содержанию. Все, что не относится напрямую к оригиналу, вынесено в примечания.
С предложениями, пожеланиями и замечаниями, как обычно, в ЛС.