Задача: отловить нажатие правой кнопки мыши в окне браузера и показать собственное контекстное меню.
Что происходит при нажатии правой кнопки мыши в окне браузера? Появится контекстное меню, внешний вид и набор функций которого будет зависеть от типа браузера и того места, куда вы кликнули.
А что, если мы захотели заблокировать браузерное контекстное меню и показать собственное? Возможно? Да. К сожалению не кроссбраузерно, но код приведенный ниже будет работать в Gecko, Safari и IE. Opera таких возможностей по умолчанию не предоставляет.
Для начала прорисуем три DIV-а, в 2-х из которых покажем собственное контекстное меню, а в третьем оставим дефолтное браузерное.
• Код HTML
<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>
Как видите, отлов нажатия правой кнопки происходит с помощью события
oncontextmenu. Для написания кода функции menu необходимы следующие составляющие:
–
Функция для добавления обработчиков событий. Используется для скрытия собственного контекстного меню при кликах в других частях документа.
–
Функция для определения координат указателя мыши. Используется для определения положения, в котором мы покажем контекстное меню.
Блокировать всплывание стандартного браузерного меню можно элементарно возвращая false.
Теперь код:
• Код JavaScript
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) {
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) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
}
return {x:x, y:y};
}
function menu(type, evt) {
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 :
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";
});
Пример обработки нажатия правой кнопки мыши.
Замечание:
Выражение "правая кнопка мыши" в данной статье не стоит понимать в буквальном смысле, т.к. пользователь может настроить свою мышь так, что функции правой будет выполнять левая кнопка ;-)
На работе скриптов это естественно никак не отразится.
