Я знаю, что этот вопрос очень старый, но я просто столкнулся с той же проблемой и решил ее сам, поэтому я отвечаю на тот случай, если кто-то найдет это через Google, как и я. Я основал свое решение на решении @ Andrew, но потом практически все изменил.
РЕДАКТИРОВАТЬ : видя, насколько это популярно в последнее время, я решил также обновить стили, чтобы они были больше похожи на 2014, а не на Windows 95. Я исправил ошибки, обнаруженные @Quantico и @Trengot, так что теперь это более надежный ответ.
РЕДАКТИРОВАТЬ 2 : Я установил его с помощью StackSnippets, поскольку это действительно классная новая функция. Я оставляю здесь хороший jsfiddle для справки (щелкните 4-ю панель, чтобы увидеть, как они работают).
Новый фрагмент стека:
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me
Примечание: вы можете увидеть небольшие ошибки (раскрывающийся список далеко от курсора и т. Д.), Убедитесь, что он работает в jsfiddle , так как он больше похож на вашу веб-страницу, чем может быть StackSnippets.
Франсиско Пресенсия
источник
Как сказал Адриан, плагины будут работать точно так же. Вам понадобятся три основные части:
1: Обработчик событий для
'contextmenu'события:Здесь вы можете привязать обработчик событий к любому селектору, для которого вы хотите отобразить меню. Я выбрал весь документ.
2: Обработчик событий для
'click'события (чтобы закрыть пользовательское меню):3: CSS для управления положением меню:
Важная вещь в CSS - это включение
z-indexиposition: absoluteБыло бы не так уж сложно обернуть все это в красивый плагин jQuery.
Здесь вы можете увидеть простую демонстрацию: http://jsfiddle.net/andrewwhitaker/fELma/
источник
event.targetвнутрь привязки щелчка наdocument. Если его нет в контекстном меню, скройтеисточник
вот пример контекстного меню правой кнопки мыши в javascript: Контекстное меню правой кнопки мыши
Используется необработанный код javasScript для функциональности контекстного меню. Не могли бы вы проверить это, надеюсь, это поможет вам.
Живой код:
источник
Контекстное меню браузера переопределяется. Невозможно расширить собственное контекстное меню ни в одном из основных браузеров.
Поскольку плагин создает собственное меню, единственная часть, которая действительно абстрагируется, - это событие контекстного меню браузера. Плагин создает html-меню на основе вашей конфигурации, а затем размещает это содержимое в том месте, где вы щелкнули.
Да, это единственный способ создать собственное контекстное меню. Очевидно, что разные плагины делают вещи немного по-разному, но все они переопределяют событие браузера и помещают собственное меню на основе HTML в нужное место.
источник
Вы можете посмотреть это руководство: http://www.youtube.com/watch?v=iDyEfKWCzhg. Убедитесь, что контекстное меню сначала скрыто и имеет абсолютное положение. Это гарантирует, что не будет множественных контекстных меню и бесполезного создания контекстного меню. Ссылка на страницу размещена в описании ролика на YouTube.
источник
Я знаю, что это тоже довольно старое. Недавно мне потребовалось создать контекстное меню, которое я вставляю на другие сайты с другими свойствами в зависимости от щелчка элемента.
Это довольно грубо, и, вероятно, есть более эффективные способы добиться этого. Он использует библиотеку контекстного меню jQuery, расположенную здесь
Мне понравилось его создавать, и хотя вам, ребята, это может пригодиться.
Вот скрипка . Я надеюсь, что это может кому-то помочь.
источник
У меня есть хорошая и простая реализация с использованием начальной загрузки следующим образом.
источник