webew
Войти » Регистрация
 
JavaScript :: События

Обработка нажатия правой кнопки мыши (oncontextmenu)

11 февраля 2008, 14:59
Задача: отловить нажатие правой кнопки мыши в окне браузера и показать собственное контекстное меню.

Что происходит при нажатии правой кнопки мыши в окне браузера? Появится контекстное меню, внешний вид и набор функций которого будет зависеть от типа браузера и того места, куда вы кликнули.
А что, если мы захотели заблокировать браузерное контекстное меню и показать собственное? Возможно? Да. К сожалению не кроссбраузерно, но код приведенный ниже будет работать в 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>

Как видите, отлов нажатия правой кнопки происходит с помощью события 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";
});

Пример:

Кликни правой кнопкой
Кликни правой кнопкой
Кликни правой кнопкой

Замечание:

Выражение "правая кнопка мыши" в данной статье не стоит понимать в буквальном смысле, т.к. пользователь может настроить свою мышь так, что функции правой будет выполнять левая кнопка ;-) На работе скриптов это естественно никак не отразится.


// Все права на статью JavaScript::Обработка нажатия правой кнопки мыши (oncontextmenu) принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

Serg_pnz

Тут где-то ошибка закралась - не работает. По ссылке на оригинал работает.
19.08.2009, 13:00
Ответить

bur

Спасибо, поправим.
19.08.2009, 13:03
Ответить

Serg_pnz

Кстати для оперы так никто ничего не придумал?
19.08.2009, 13:46
Ответить

bur

Боюсь там ничего не придумаешь.
19.08.2009, 13:51
Ответить
NO USERPIC

Тсарь

В Opera 10.50 по умолчанию блокировка обработки нажатия правой кнопкой мышки уже отключена.
25.12.2009, 13:05
Ответить
NO USERPIC

Plaes

заблокировать кнопку можно насовсем даже в опере =)
09.12.2010, 18:30
Ответить
NO USERPIC

geyan

Потрясно !Спасибо - самый ясный пример , у меня работает и я это взял для видео плеера на сайт ! огромное спасибо
20.07.2016, 10:22
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: