Обработка нажатия правой кнопки мыши (oncontextmenu)
11 февраля 2008, 17:59
Автор: Александр Бурцев [bur]
Задача: отловить нажатие правой кнопки мыши в окне браузера и показать собственное контекстное меню.
Что происходит при нажатии правой кнопки мыши в окне браузера? Появится контекстное меню, внешний вид и набор функций которого будет зависеть от типа браузера и того места, куда вы кликнули.
А что, если мы захотели заблокировать браузерное контекстное меню и показать собственное? Возможно? Да. К сожалению не кроссбраузерно, но код приведенный ниже будет работать в Gecko, Safari и IE. Opera таких возможностей по умолчанию не предоставляет.
Для начала прорисуем три DIV-а, в 2-х из которых покажем собственное контекстное меню, а в третьем оставим дефолтное браузерное.
Как видите, отлов нажатия правой кнопки происходит с помощью события oncontextmenu. Для написания кода функции menu необходимы следующие составляющие:
– Функция для добавления обработчиков событий. Используется для скрытия собственного контекстного меню при кликах в других частях документа.
– Функция для определения координат указателя мыши. Используется для определения положения, в котором мы покажем контекстное меню.
Блокировать всплывание стандартного браузерного меню можно элементарно возвращая false.
Теперь код:
// Все права на статью JavaScript::Обработка нажатия правой кнопки мыши (oncontextmenu) принадлежат сайту 2007.fastcoder.ru
Что происходит при нажатии правой кнопки мыши в окне браузера? Появится контекстное меню, внешний вид и набор функций которого будет зависеть от типа браузера и того места, куда вы кликнули.
А что, если мы захотели заблокировать браузерное контекстное меню и показать собственное? Возможно? Да. К сожалению не кроссбраузерно, но код приведенный ниже будет работать в Gecko, Safari и IE. Opera таких возможностей по умолчанию не предоставляет.
Для начала прорисуем три DIV-а, в 2-х из которых покажем собственное контекстное меню, а в третьем оставим дефолтное браузерное.
<div oncontextmenu="return menu(1, event);" style="height:100px; border:1px solid red; background-color:#FFCCCC;">Кликни правой кнопкой</div>
<div oncontextmenu="return menu(2, event);" style="height:100px; border:1px solid blue; background-color:#CCCCFF;">Кликни правой кнопкой</div>
<div style="height:100px; border:1px solid green; background-color:#CCFFCC;">Кликни правой кнопкой</div>
<!-- Контер для собственного контекстного меню. По умолчания - скрыт. -->
<div id="contextMenuId" style="position:absolute; top:0; left:0; border:1px solid #666; background-color:#CCC; display:none; float:left;"></div>
<div oncontextmenu="return menu(2, event);" style="height:100px; border:1px solid blue; background-color:#CCCCFF;">Кликни правой кнопкой</div>
<div style="height:100px; border:1px solid green; background-color:#CCFFCC;">Кликни правой кнопкой</div>
<!-- Контер для собственного контекстного меню. По умолчания - скрыт. -->
<div id="contextMenuId" style="position:absolute; top:0; left:0; border:1px solid #666; background-color:#CCC; display:none; float:left;"></div>
Как видите, отлов нажатия правой кнопки происходит с помощью события 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 += "<br><a href='#'>Первая функция</a>";
html += "<br><a href='#'>Вторая функция</a>";
html += "<br><a href='#'>Третья функция</a>";
break;
case (2) :
html = "Меню для второго ДИВа";
html += "<br><i>(пусто)</i>";
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() {
document.getElementById("contextMenuId").style.display = "none";
});
addHandler(document, "click", function() {
document.getElementById("contextMenuId").style.display = "none";
});
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 += "<br><a href='#'>Первая функция</a>";
html += "<br><a href='#'>Вторая функция</a>";
html += "<br><a href='#'>Третья функция</a>";
break;
case (2) :
html = "Меню для второго ДИВа";
html += "<br><i>(пусто)</i>";
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() {
document.getElementById("contextMenuId").style.display = "none";
});
addHandler(document, "click", function() {
document.getElementById("contextMenuId").style.display = "none";
});
Пример:
Кликни правой кнопкой
Кликни правой кнопкой
Кликни правой кнопкой
Замечание:
Выражение "правая кнопка мыши" в данной статье не стоит понимать в буквальном смысле, т.к. пользователь может настроить свою мышь так, что функции правой будет выполнять левая кнопка ;-) На работе скриптов это естественно никак не отразится.// Все права на статью JavaScript::Обработка нажатия правой кнопки мыши (oncontextmenu) принадлежат сайту 2007.fastcoder.ru
