Блог

У меня есть веб-расширение, в котором есть прослушиватель событий contextmenu

https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event

Это событие запускается, когда пользователь пытается открыть контекстное меню (обычно щелчком правой кнопки мыши) на каком-либо элементе. Но для запуска события необязательно, чтобы на самом деле открывалось какое-либо контекстное меню (на основе dom) (обычно вы увидите какое-либо контекстное меню, но оно может быть на уровне приложения/системы и не связано с dom).

Есть ли какой-либо способ программно определить, действительно ли открыто контекстное меню?

Мы можем использовать способ отправки событий, который происходит в два этапа: захват (событие «спускается» по дереву DOM window к целевому элементу) и пузырение (событие «поднимается» обратно window ).

Таким образом, меню будет отображаться, если событие не было отменено, когда оно «всплыло» обратно window .

 window.addEventListener('contextmenu', e => {
  if (e.isTrusted amp;amp; !e.defaultPrevented) {
    console.log('will show the menu now');
  }
});
 

Обратите внимание, что процесс отправки может быть остановлен каким-либо другим сценарием event.stopPropagation() , поэтому событие никогда не будет отправлено window в фазе пузырьков. Если вы хотите обнаружить это, вы можете прослушать событие на этапе захвата и запустить таймер:

 let timer;
window.addEventListener('contextmenu',
  e => { if (e.isTrusted) timer = setTimeout(detectCanceledMenu, 0, e.target); },
  true);

window.addEventListener('contextmenu', () => clearTimeout(timer));

function detectCanceledMenu(el) {
  console.log('the menu was canceled');
}