Атрибут contextmenu тега <article>
Описание
Атрибут contextmenu для тега <article> позволяет связать пользовательское контекстное меню с элементом статьи. Это устаревший атрибут, который никогда не был стандартизирован и удален из HTML5.
<article contextmenu="article-menu">
<h2>Статья с контекстным меню</h2>
<p>Правый клик для меню (не поддерживается)</p>
</article>
<menu type="context" id="article-menu">
<menuitem label="Поделиться"></menuitem>
<menuitem label="Сохранить"</menuitem>
</menu>
Причины устаревания:
| Проблема | Решение |
|---|---|
| Нестандартизированная реализация | Использование JavaScript |
| Ограниченная поддержка браузерами | Современные API контекстного меню |
| Удален из спецификации HTML5 | Альтернативные подходы |
Современная альтернатива на JavaScript:
<article id="custom-context-article">
<h2>Статья с кастомным меню</h2>
<p>Правый клик для контекстного меню</p>
</article>
<script>
document.getElementById('custom-context-article').addEventListener('contextmenu', function(e) {
e.preventDefault();
showCustomMenu(e.pageX, e.pageY);
});
function showCustomMenu(x, y) {
// Реализация показа меню
console.log('Показать меню в координатах:', x, y);
}
</script>
Рекомендации:
- Важно: Не используйте contextmenu - он не работает в современных браузерах
- Для нативных приложений рассмотрите Web Components
- Всегда отменяйте стандартное меню через
e.preventDefault() - Учитывайте доступность при создании кастомных меню
Лучшие практики для кастомных меню:
<style>
.custom-menu {
position: absolute;
background: white;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.custom-menu-item {
padding: 8px 12px;
cursor: pointer;
}
</style>
<div id="context-menu" class="custom-menu" hidden>
<div class="custom-menu-item">Поделиться</div>
<div class="custom-menu-item">Сохранить</div>
</div>
Важно: Атрибут contextmenu был экспериментальным и не получил широкой поддержки. Не используйте его в production-коде.
Совет: Для создания контекстных меню используйте специализированные библиотеки типа ContextJS или собственные реализации на JavaScript.
Примечание: Хотя идея кастомных контекстных меню интересна, современные браузеры ограничивают эту функциональность из соображений безопасности и UX.