jQuery метод .contextmenu()

Определение и применение

jQuery метод .contextmenu() привязывает JavaScript обработчик событий contextmenu (вызов контекстного меню на элементе - клик правой кнопкой мыши), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript

$( selector ).contextmenu() // метод используется без параметров

$( selector ).contextmenu( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

JavaScript

$( selector ).contextmenu( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .contextmenu(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

JavaScript

$( selector ).on( "contextmenu", handler )

$( selector ).trigger( "contextmenu" )

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4.3)

Значения параметров

Параметр	Описание
eventData	Объект, содержащий данные, которые будут переданы в обработчик событий.
handler	Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект `Event`.

Пример старого кода

Метод .contextmenu() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div>Элемент div</div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('div').contextmenu() // вызываем событие contextmenu на элементе <div>
    })
    $('div').contextmenu(function () {
        // задаем функцию при нажатиии на элемент <div>
        $('div').toggleClass('orangered-bg') // добавляем, или убираем класс orangered-bg у элемента
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

div {
  width: 100px; /* ширина элемента */
  height: 100px; /* высота элемента */
  background: blue; /* цвет заднего фона */
}
.orangered-bg {
  background: orangered; /* цвет заднего фона */
}

В этом примере с использованием jQuery метода .contextmenu() мы при нажатии на элемент <button> (кнопка) вызываем событие "contextmenu" на элементе <div>. Самому элементу <div> задаем, что при срабатывании события "contextmenu" на элементе выполнить функцию, которая с использованием метода .toggleClass() добавит, или уберет класс orangered-bg у элемента.