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

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

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

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

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

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

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

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

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

Синтаксис

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

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі користувач може взаємодіяти з текстовим блоком, клацаючи правою кнопкою миші, щоб відкрити власне контекстне меню. Меню надає три опції: копіювання тексту в буфер обміну, зміну кольору фону блоку та видалення тексту. Кожна дія виконується за допомогою JavaScript, що демонструє, як можна створювати інтерактивні веб-сторінки з кастомними функціями, які перевершують стандартний набір інструментів браузера.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/BagqBmE">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі текстовий блок має кастомне контекстне меню, яке з'являється поруч із курсором миші при кліку правою кнопкою. Меню закривається при натисканні будь-де на сторінці. Це забезпечує більш інтерактивний досвід для користувачів, надаючи додаткові опції, які не доступні в стандартному меню.

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';
});

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

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';
});

JS довідник

JavaScript

Наповнення JS розділу