Обратите внимание, что

  1. данный документ является переводом документа «HTML 5.1: 4.11. Interactive elements» и на данный момент находится на стадии перевода;
  2. данный документ может содержать неточности, опечатки и ошибки перевода;
  3. официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте W3C.

W3C

HTML 5.1

Рекомендация W3C от

4.11. Интерактивные элементы


* * *

4.11.5. Контекстные меню

4.11.5.1. Объявление контекстного меню

Атрибут contextmenu указывает на элементы контекстного меню. В значении должен быть указан ID элемента menu находящемся в том же поддереве элементов, чей атрибут type находится во всплывающем меню.

Когда пользователь кликает правой кнопкой мыши на элементе с атрибутом contextmenu, агент пользователя сам создаёт событие contextmenu для элемента, а затем если это событие подтверждается, появляются элементы контекстного меню.

Вот пример контекстного меню для поля ввода: 
<form name="npc">
<label>Имя персонажа: <input name=char type=text contextmenu=namemenu required></label>
<menu type=context id=namemenu>
<menuitem label="Случайное имя" onclick="document.forms.npc.elements.char.value = getRandomName()">
<menuitem label="Заполнить другие поля на основе имени" onclick="prefillFields(document.forms.npc.elements.char.value)">
</menu>
</form>

В данном примере добавляются два пункта в контекстное меню, первый называется "Случайное имя", второй пункт имеет называние "Заполнить другие поля на основе имени". Они вызывают скрипты, которые не указаны в приведенном выше примере.

4.11.5.2. Модель обработки

Каждый элемент имеет своё назначенное контекстное меню, которое может быть пустым. Если элемент А имеет атрибут contextmenu, и существует такой элемент с ID заданный по значению А атрибутов contextmenu в домашнем поддереве элементов А, и первый такой элемент в дереве элементов является элементом menu, чей атрибут type находится во всплывающем окне меню, то А присваивает контекстное меню этому элементу. В противном случае, если А имеет родительский элемент, то назначенное контекстное меню А является назначенным контекстным меню своего родительского элемента. В противном случае, назначенное контекстное меню A является пустым.

Когда запрашивается контекстное меню элемента (например, пользователь щёлкает правой кнопкой мыши на элементе, или нажимает на клавишу контекстного меню), агент пользователя должен использовать соответствующие правила из следующего списка:

Если пользователь запросил контекстное меню, с помощью манипулятора/мышки
Агент пользователя должен создать надёжное событие с именем contextmenu, которое является симуляцией и может быть отменено, и использует MouseEvent интерфейс в элементе, для которого было запрошено меню. Контекстная информация о событии должна быть инициализирована (подготовлена к использованию) в тех же значениях, что и в прошлое создаваемое пользователем MouseEvent событие, которое было создано, как часть жеста интерпретируемого как запрос контекстного меню.
В остальных случаях
Агент пользователя должен создавать синтетическое событие мыши с названием contextmenu, которое является симуляцией и может быть отменено в элементе для которого было запрошено меню.

Как правило, таким образом, созданное событие contextmenu будет действовать по умолчанию для mouseup или keyup событий. Точная последовательность событий web-браузера зависит, от того как он будет меняться в зависимости от платформы.

Действие по умолчанию на событие contextmenu может зависеть от элемента, для которого в качестве меню было указано не пустое контекстное меню, если событие отправки завершается, как следовало.

Если элементу назначается контекстное меню, которое при запросе этого меню оказывается пустым/несуществующим, то агент пользователя должен будет показать своё контекстное меню, используемое по умолчанию, если таковое имеется.

В противном случае, субъекту позволяется быть элементом, для которого меню было задано, а так же допускается меню, которое было назначено в роли контекстного меню сразу же после завершения создания события contextmenu. Агент пользователя должен создавать надёжное событие с названием указанным в атрибуте show menu элемента, используя интерфейс RelatedEvent, с атрибутом relatedTarget для каждого субъекта. Событие должно быть аннулировано.

Если это событие (show событие) не отменяется, то агент пользователя должен создать и показать меню для работы с меню, с соответствующей пометкой в теме.

Агент пользователя может также предоставить доступ к его собственному контекстному меню используемому по умолчанию, если таковое имеется, с помощью показанного контекстного меню. Например, могут быть объединены воедино пункты меню из двух различных меню, или контекстное меню страницы может быть предоставлено, в виде подменю вставленное в меню, используемое по умолчанию. В общем, web-браузерам рекомендуется снять акцент с собственных контекстных меню элементов, чтобы придать контекстному меню автора, видимость законности – для того чтобы позволить документам чувствовать себя, как "приложение", а не "простая веб-страница".

Агенты пользователей могут обеспечить необходимые средства минуя модель обработки контекстного меню, гарантируя, что пользователь всегда сможет получить доступ к стандартному контекстному меню браузера. Например, агент пользователя может обрабатывать событие вызываемое нажатием правой кнопки мыши, при нажатой клавише Shift таким образом, что это не приведёт к созданию события contextmenu, а вместо этого всегда будет показывать контекстное меню используемое по умолчанию.

IDL атрибут contextMenu должен вернуть содержимое атрибута contextmenu.

В данном примере изображению кошки устанавливается контекстное меню с четырьмя возможными командами: 
<img src="cats.jpeg" alt="Кошки" contextmenu=catsmenu>
<menu type="context" id="catsmenu">
<menuitem label="Котята" onclick="kittens.pet()">
<menuitem label="Обниматься с котятами" onclick="kittens.cuddle()">
<menu label="Кормить котят">
<menuitem label="Рыба" onclick="kittens.feed(fish)">
<menuitem label="Кура" onclick="kittens.feed(chicken)">
</menu>
</menu>

Когда пользователь использующий мышь для управления в визуальном Web-браузере нажимает правую кнопку мыши на изображении, то браузер может показать всплывающее контекстное меню как это:

A context menu, shown over a picture of cats, with four lines: the first two offering the menu items described in the markup above ('Pet the kittens' and 'Cuddle with the kittens'), the third giving a submenu labeled 'Feed the kittens', and the fourth, after a horizontal splitter, consisting of only a downwards-pointing disclosure triangle.

Когда пользователь нажимает на треугольник, web-браузер расширяет контекстное меню, чтобы показать собственные команды:

This would result in the same basic interface, but with a longer menu; the disclosure triangle having been replaced by items such as 'View Image', 'Copy Image', 'Copy Image Location', and so forth.

4.11.5.3. RelatedEvent интерфейсы
[Constructor(DOMString type, optional RelatedEventInit eventInitDict)]
interface RelatedEvent : Event {
readonly attribute EventTarget? relatedTarget;
};

dictionary RelatedEventInit : EventInit {
EventTarget? relatedTarget;
};
event . relatedTarget

Возвращает различные события, задействованные в данном событии. Например, когда возникает show событие с участием элемента menu, другие события, задействованные, в данном действии будут так же работать с элементом, для которого показывается меню.

Атрибут relatedTarget должен возвращать значение для инициализации (подготовки к использованию). Когда объект только создаётся, этот атрибут должен быть инициализирован значением ноль/пустое значение. Он представляет собой другое событие, задействованное в данном событии.