JS властивість Event.contextmenu

Загальний опис

contextmenu — це подія, яка виникає, коли користувач викликає контекстне меню, зазвичай за допомогою правої кнопки миші або спеціальної клавіші на клавіатурі. Ця подія дозволяє розробникам перехоплювати стандартне контекстне меню браузера та створювати власні контекстні меню з додатковими функціями або налаштуваннями, специфічними для їхнього додатка. Наприклад, у веб-додатках контекстне меню може містити опції для копіювання, вставки або виконання інших дій, що стосуються вибраного елемента.

Щоб використовувати подію contextmenu, розробнику потрібно додати обробник подій до елемента, який повинен реагувати на цю подію. Обробник подій може виконувати будь-яку необхідну логіку, таку як відміна стандартного контекстного меню або відображення власного меню. Наприклад:

document.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // Відміняє стандартне контекстне меню
  alert('Власне контекстне меню.');
});

У цьому прикладі стандартне контекстне меню браузера відміняється, і замість нього з'являється спливаюче вікно з повідомленням "Власне контекстне меню."

Подія contextmenu часто використовується для створення більш інтуїтивних та інтерактивних користувацьких інтерфейсів. Наприклад, у графічних редакторах, іграх або CRM-системах розробники можуть створювати контекстні меню, що забезпечують користувачів додатковими опціями, які відповідають контексту вибраного елемента. Це може покращити досвід користувача, дозволяючи йому виконувати дії швидше та ефективніше.

Подія contextmenu може бути викликана не тільки мишею, але й за допомогою клавіатури (наприклад, клавішею контекстного меню), що робить її корисною для користувачів, які віддають перевагу клавіатурі або користуються доступністю.

правити

Порада

Для створення кастомного контекстного меню, яке з'являється під час кліку правою кнопкою миші, розгляньте можливість використання CSS для стилізації вашого меню. Ви можете використовувати position: absolute і встановлювати координати меню відповідно до позиції курсору миші за допомогою властивостей event.clientX і event.clientY.

автор: Bond правити

Порада

Щоб зробити ваше кастомне контекстне меню більш інтерактивним, розгляньте можливість додавання функцій, які адаптуються до контексту. Наприклад, можна змінювати доступні опції меню в залежності від того, який елемент було обрано або де було викликано меню.

автор: Bond правити

Порада

Завжди тестуйте своє кастомне контекстне меню на різних пристроях, включаючи сенсорні екрани. Деякі пристрої не мають правої кнопки миші, і виклик контекстного меню може працювати інакше (наприклад, довге натискання).

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('contextmenu', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="textBlock">Демонстраційний елемент</div>
<div id="customMenu">Демонстраційний елемент</div>

const textBlock = document.getElementById('textBlock');
const customMenu = document.getElementById('customMenu');

textBlock.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  customMenu.style.display = 'block';
  customMenu.style.top = `${event.clientY}px`;
  customMenu.style.left = `${event.clientX}px`;
});

document.addEventListener('click', function() {
  customMenu.style.display = 'none';
});

<div id="dynamicMenu">Демонстраційний елемент</div>
<div class="item">перший елемент item</div>
<div class="item">другий елемент item</div>

const items = document.querySelectorAll('.item');
const dynamicMenu = document.getElementById('dynamicMenu');

items.forEach(item => {
  item.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    const itemType = event.target.dataset.type;
    dynamicMenu.innerHTML = ''; // Очищуємо попереднє меню

    if (itemType === 'image') {
      dynamicMenu.innerHTML = '<li>Скачати зображення</li><li>Переглянути інформацію</li>';
    } else if (itemType === 'text') {
      dynamicMenu.innerHTML = '<li>Копіювати текст</li><li>Виділити все</li>';
    }

    dynamicMenu.style.display = 'block';
    dynamicMenu.style.top = `${event.clientY}px`;
    dynamicMenu.style.left = `${event.clientX}px`;
  });
});

document.addEventListener('click', function() {
  dynamicMenu.style.display = 'none';
});