У каких элементов есть контекст

Контекстные меню (Context Menu) в DOM

Контекстное меню (вызывается правой кнопкой мыши) может быть у практически всех элементов HTML, но есть исключения и особенности.

Элементы с контекстным меню по умолчанию

Все интерактивные элементы имеют встроенное контекстное меню:

1. Текстовые поля и textarea — копирование, вставка, вырезание, удаление

<input type="text">
<textarea></textarea>

1. Ссылки <a> — открыть, открыть в новой вкладке, копировать ссылку

<a href="#">Ссылка</a>

1. Изображения <img> — сохранить, открыть в новой вкладке, копировать URL

<img src="image.jpg" alt="Описание">

1. Видео и аудио — контроль воспроизведения, сохранение

<video src="video.mp4"></video>
<audio src="audio.mp3"></audio>

1. Выбираемый текст — копирование, поиск

<p>Этот текст можно выделить и скопировать</p>

1. Кнопки форм — зависит от браузера

<input type="button" value="Нажми">
<button>Клик</button>

Элементы БЕЗ контекстного меню

Блочные элементы обычно не имеют встроенного контекста:

<div></div>
<span></span>
<p></p>
<section></section>

Но ты можешь добавить контекстное меню для любого элемента программно.

Как добавить свой контекст

Event: contextmenu

document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  console.log('Правая кнопка на странице');
});

// Для конкретного элемента
const myDiv = document.getElementById('my-div');
myDiv.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  console.log('Контекстное меню на моём div');
  // Показать своё меню
});

Пример: Своё контекстное меню

const contextMenu = document.getElementById('context-menu');

document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  
  // Показываем меню в позиции курсора
  contextMenu.style.display = 'block';
  contextMenu.style.top = event.clientY + 'px';
  contextMenu.style.left = event.clientX + 'px';
});

// Скрываем при клике
document.addEventListener('click', () => {
  contextMenu.style.display = 'none';
});

HTML:

<div id="context-menu" class="hidden">
  <ul>
    <li>Копировать</li>
    <li>Вставить</li>
    <li>Удалить</li>
  </ul>
</div>

Атрибут contextmenu (устарел)

Почти во всех браузерах удалили:

<!-- Это больше не работает -->
<div contextmenu="my-menu"></div>
<menu id="my-menu" type="context">
  <menuitem label="Edit"></menuitem>
</menu>

Используй обработчик события contextmenu вместо этого.

Элементы contenteditable

При contenteditable="true" любой элемент получает контекстное меню как текстовое поле:

<div contenteditable="true">Редактируемый текст</div>

Для какого контента важно контекстное меню

• Для текста — копирование (используется часто)
• Для изображений — сохранение (критично для пользователя)
• Для ссылок — открытие в новой вкладке
• Для пользовательского функционала — удаление, редактирование, общий доступ

Лучшие практики

1. Не отключай контекст без причины — пользователи привыкли копировать и сохранять
2. Если блокируешь — предоставь функциональность другим способом
3. Mobile-friendly — на мобильных длинный тап вместо contextmenu
4. Accessibility — добавляй aria-labels и клавиатурные shortcuts