Какие есть варианты создания своего контекстного меню при нажатии правой кнопки мыши в браузере?

Question

[ImpAnonym]

Есть ли какие-то готовые решения/библиотеки/фреймворки?
Можно ли сделать на чистом JavaScript/CSS? Если да, то с чего начать?

Стандартное:


Кастомизированное:

Answer 1

[Moon Presence]

Можно ли сделать на чистом JavaScript/CSS?

Например вот так:

Есть ли какие-то готовые решения/библиотеки/фреймворки?

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

Comments

[ImpAnonym]

То есть фокус в том, что новое меню просто слоем выше, чем стандартное?

[Moon Presence]

ImpAnonym, нет, на самом деле - стандартное меню скажем так - удаляется и добавляется кастомное. То есть банальная замена. Это даже лучше, чем если бы делать маскировкой.

[FinGanapre]

ImpAnonym, там e.preventDefault(); Не будет стандартной менюшки.

[ImpAnonym]

The Wizard of Oz, Ну да, лучше. Просто я как раз об этом и думал. Если просто слоем выше, то не очень профессионально.

[Moon Presence]

ImpAnonym, окей.

[ImpAnonym]

The Wizard of Oz, Ну да... Кхм...

[ImpAnonym]

А как сделать для нескольких элементов? например есть кучка ячеек таблицы. И чтобы передавалось значение из этих ячеек скрипту, после нажатия "Редактировать".

[ImpAnonym]

ImpAnonym, Ага. Для всех найденных элементов сделал...

Код

const element = document.querySelectorAll(".apSquare");
          const contextMenu = document.querySelector(".context-menu");
          for (const [qsKey, qsValue] of Object.entries(element)) {
            console.log(qsKey);
            console.log(qsValue);
            qsValue.addEventListener("contextmenu", (e) => {
              e.preventDefault();
              contextMenu.style.left = e.clientX + "px";
              contextMenu.style.top = e.clientY + "px";
              contextMenu.style.display = "block";
            });
            window.addEventListener("click", function () {
              contextMenu.style.display = "none";
            });
          }

Но вот как перехватить значение?

[ImpAnonym]

ImpAnonym, Ага. Инфа лежит в qsValue.innerText

Answer 2

[naromixo]

Создаешь блок контекстного меню (своего), делаешь его невидимым через display: none;
В JS ловишь открытие контекстного меню и отменяешь его через return false;
В этом же обработчике перемещаешь его в координаты мыши и делаешь видимым.

Comments

[ImpAnonym]

То есть фокус в том, что новое меню просто слоем выше, чем стандартное?

[naromixo]

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