Wiem, że to pytanie jest bardzo stare, ale właśnie wymyśliłem ten sam problem i rozwiązałem go samodzielnie, więc odpowiadam na wypadek, gdyby ktoś znalazł to przez Google, tak jak ja. Oparłem swoje rozwiązanie na rozwiązaniu @ Andrew, ale w zasadzie wszystko później zmodyfikowałem.
EDYCJA : widząc, jak popularne było to ostatnio, postanowiłem zaktualizować również style, aby wyglądały bardziej jak 2014, a mniej jak Windows 95. Naprawiłem błędy zauważone przez @Quantico i @Trengot, więc teraz jest to solidniejsza odpowiedź.
EDYCJA 2 : Ustawiłem to za pomocą StackSnippets, ponieważ są to naprawdę fajna nowa funkcja. Zostawiam tutaj dobre jsfiddle w celach informacyjnych (kliknij czwarty panel, aby zobaczyć, jak działają).
Nowy fragment stosu:
$(document).bind("contextmenu", function (event) {
event.preventDefault();
$(".custom-menu").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
$(document).bind("mousedown", function (e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$(".custom-menu").hide(100);
}
});
$(".custom-menu li").click(function(){
switch($(this).attr("data-action")) {
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
$(".custom-menu").hide(100);
});
.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;
}
.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;
}
<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>
Right click me
Uwaga: możesz zobaczyć kilka drobnych błędów (menu rozwijane daleko od kursora itp.), Upewnij się, że działa w jsfiddle , ponieważ jest bardziej podobny do twojej strony internetowej niż może być StackSnippets.
Jak powiedział Adrian, wtyczki będą działać w ten sam sposób. Będziesz potrzebować trzech podstawowych części:
1: Obsługa zdarzeń dla
'contextmenu'
zdarzenia:$(document).bind("contextmenu", function(event) { event.preventDefault(); $("<div class='custom-menu'>Custom menu</div>") .appendTo("body") .css({top: event.pageY + "px", left: event.pageX + "px"}); });
Tutaj możesz powiązać procedurę obsługi zdarzeń z dowolnym selektorem, dla którego chcesz wyświetlić menu. Wybrałem cały dokument.
2: Obsługa zdarzeń dla
'click'
zdarzenia (aby zamknąć menu niestandardowe):$(document).bind("click", function(event) { $("div.custom-menu").hide(); });
3: CSS do kontrolowania pozycji menu:
.custom-menu { z-index:1000; position: absolute; background-color:#C0C0C0; border: 1px solid black; padding: 2px; }
Ważną rzeczą w CSS jest dołączenie rozszerzenia
z-index
iposition: absolute
Nie byłoby trudno zawinąć to wszystko w zgrabną wtyczkę jQuery.
Możesz zobaczyć proste demo tutaj: http://jsfiddle.net/andrewwhitaker/fELma/
źródło
event.target
wnętrze wiązania kliknięcia nadocument
. Jeśli nie ma tego w menu kontekstowym, ukryj je: jsfiddle.net/fELma/286<!DOCTYPE html> <html> <head> <title>Right Click</title> <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script> <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script> </head> <body> <span class="context-menu-one" style="border:solid 1px black; padding:5px;">Right Click Me</span> <script type="text/javascript"> $(function() { $.contextMenu({ selector: '.context-menu-one', callback: function(key, options) { var m = "clicked: " + key; window.console && console.log(m) || alert(m); }, items: { "edit": {name: "Edit", icon: "edit"}, "cut": {name: "Cut", icon: "cut"}, copy: {name: "Copy", icon: "copy"}, "paste": {name: "Paste", icon: "paste"}, "delete": {name: "Delete", icon: "delete"}, "sep1": "---------", "quit": {name: "Quit", icon: function(){ return 'context-menu-icon context-menu-icon-quit'; }} } }); $('.context-menu-one').on('click', function(e){ console.log('clicked', this); }) }); </script> </body> </html>
źródło
oto przykład menu kontekstowego prawego przycisku myszy w javascript: Menu kontekstowe prawego przycisku myszy
Użyto surowego kodu javasScript do obsługi menu kontekstowego. Czy możesz to sprawdzić, mam nadzieję, że to ci pomoże.
Aktywny kod:
(function() { "use strict"; /*********************************************** Context Menu Function Only ********************************/ function clickInsideElement( e, className ) { var el = e.srcElement || e.target; if ( el.classList.contains(className) ) { return el; } else { while ( el = el.parentNode ) { if ( el.classList && el.classList.contains(className) ) { return el; } } } return false; } function getPosition(e) { var posx = 0, posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { x: posx, y: posy } } // Your Menu Class Name var taskItemClassName = "thumb"; var contextMenuClassName = "context-menu",contextMenuItemClassName = "context-menu__item",contextMenuLinkClassName = "context-menu__link", contextMenuActive = "context-menu--active"; var taskItemInContext, clickCoords, clickCoordsX, clickCoordsY, menu = document.querySelector("#context-menu"), menuItems = menu.querySelectorAll(".context-menu__item"); var menuState = 0, menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight; function initMenuFunction() { contextListener(); clickListener(); keyupListener(); resizeListener(); } /** * Listens for contextmenu events. */ function contextListener() { document.addEventListener( "contextmenu", function(e) { taskItemInContext = clickInsideElement( e, taskItemClassName ); if ( taskItemInContext ) { e.preventDefault(); toggleMenuOn(); positionMenu(e); } else { taskItemInContext = null; toggleMenuOff(); } }); } /** * Listens for click events. */ function clickListener() { document.addEventListener( "click", function(e) { var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName ); if ( clickeElIsLink ) { e.preventDefault(); menuItemListener( clickeElIsLink ); } else { var button = e.which || e.button; if ( button === 1 ) { toggleMenuOff(); } } }); } /** * Listens for keyup events. */ function keyupListener() { window.onkeyup = function(e) { if ( e.keyCode === 27 ) { toggleMenuOff(); } } } /** * Window resize event listener */ function resizeListener() { window.onresize = function(e) { toggleMenuOff(); }; } /** * Turns the custom context menu on. */ function toggleMenuOn() { if ( menuState !== 1 ) { menuState = 1; menu.classList.add( contextMenuActive ); } } /** * Turns the custom context menu off. */ function toggleMenuOff() { if ( menuState !== 0 ) { menuState = 0; menu.classList.remove( contextMenuActive ); } } function positionMenu(e) { clickCoords = getPosition(e); clickCoordsX = clickCoords.x; clickCoordsY = clickCoords.y; menuWidth = menu.offsetWidth + 4; menuHeight = menu.offsetHeight + 4; windowWidth = window.innerWidth; windowHeight = window.innerHeight; if ( (windowWidth - clickCoordsX) < menuWidth ) { menu.style.left = (windowWidth - menuWidth)-0 + "px"; } else { menu.style.left = clickCoordsX-0 + "px"; } // menu.style.top = clickCoordsY + "px"; if ( Math.abs(windowHeight - clickCoordsY) < menuHeight ) { menu.style.top = (windowHeight - menuHeight)-0 + "px"; } else { menu.style.top = clickCoordsY-0 + "px"; } } function menuItemListener( link ) { var menuSelectedPhotoId = taskItemInContext.getAttribute("data-id"); console.log('Your Selected Photo: '+menuSelectedPhotoId) var moveToAlbumSelectedId = link.getAttribute("data-action"); if(moveToAlbumSelectedId == 'remove'){ console.log('You Clicked the remove button') }else if(moveToAlbumSelectedId && moveToAlbumSelectedId.length > 7){ console.log('Clicked Album Name: '+moveToAlbumSelectedId); } toggleMenuOff(); } initMenuFunction(); })();
/* For Body Padding and content */ body { padding-top: 70px; } li a { text-decoration: none !important; } /* Thumbnail only */ .thumb { margin-bottom: 30px; } .thumb:hover a, .thumb:active a, .thumb:focus a { border: 1px solid purple; } /************** For Context menu ***********/ /* context menu */ .context-menu { display: none; position: absolute; z-index: 9999; padding: 12px 0; width: 200px; background-color: #fff; border: solid 1px #dfdfdf; box-shadow: 1px 1px 2px #cfcfcf; } .context-menu--active { display: block; } .context-menu__items { list-style: none; margin: 0; padding: 0; } .context-menu__item { display: block; margin-bottom: 4px; } .context-menu__item:last-child { margin-bottom: 0; } .context-menu__link { display: block; padding: 4px 12px; color: #0066aa; text-decoration: none; } .context-menu__link:hover { color: #fff; background-color: #0066aa; } .context-menu__items ul { position: absolute; white-space: nowrap; z-index: 1; left: -99999em;} .context-menu__items > li:hover > ul { left: auto; padding-top: 5px ; min-width: 100%; } .context-menu__items > li li ul { border-left:1px solid #fff;} .context-menu__items > li li:hover > ul { left: 100%; top: -1px; } .context-menu__item ul { background-color: #ffffff; padding: 7px 11px; list-style-type: none; text-decoration: none; margin-left: 40px; } .page-media .context-menu__items ul li { display: block; } /************** For Context menu ***********/
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <!-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Thumbnail Gallery <small>(Right click to see the context menu)</small></h1> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> </div> <hr> </div> <!-- /.container --> <!-- / The Context Menu --> <nav id="context-menu" class="context-menu"> <ul class="context-menu__items"> <li class="context-menu__item"> <a href="#" class="context-menu__link" data-action="Delete This Photo"><i class="fa fa-empire"></i> Delete This Photo</a> </li> <li class="context-menu__item"> <a href="#" class="context-menu__link" data-action="Photo Option 2"><i class="fa fa-envira"></i> Photo Option 2</a> </li> <li class="context-menu__item"> <a href="#" class="context-menu__link" data-action="Photo Option 3"><i class="fa fa-first-order"></i> Photo Option 3</a> </li> <li class="context-menu__item"> <a href="#" class="context-menu__link" data-action="Photo Option 4"><i class="fa fa-gitlab"></i> Photo Option 4</a> </li> <li class="context-menu__item"> <a href="#" class="context-menu__link" data-action="Photo Option 5"><i class="fa fa-ioxhost"></i> Photo Option 5</a> </li> <li class="context-menu__item"> <a href="#" class="context-menu__link"><i class="fa fa-arrow-right"></i> Add Photo to</a> <ul> <li><a href="#!" class="context-menu__link" data-action="album-one"><i class="fa fa-camera-retro"></i> Album One</a></li> <li><a href="#!" class="context-menu__link" data-action="album-two"><i class="fa fa-camera-retro"></i> Album Two</a></li> <li><a href="#!" class="context-menu__link" data-action="album-three"><i class="fa fa-camera-retro"></i> Album Three</a></li> <li><a href="#!" class="context-menu__link" data-action="album-four"><i class="fa fa-camera-retro"></i> Album Four</a></li> </ul> </li> </ul> </nav> <!-- End # Context Menu --> </body>
źródło
Menu kontekstowe przeglądarki jest zastępowane. Nie ma możliwości rozszerzenia natywnego menu kontekstowego w żadnej większej przeglądarce.
Ponieważ wtyczka tworzy własne menu, jedyną częścią, która jest naprawdę abstrakcyjna, jest zdarzenie menu kontekstowego przeglądarki. Wtyczka tworzy menu html na podstawie Twojej konfiguracji, a następnie umieszcza tę zawartość w miejscu kliknięcia.
Tak, jest to jedyny sposób tworzenia niestandardowego menu kontekstowego. Oczywiście różne wtyczki działają nieco inaczej, ale wszystkie nadpisują zdarzenie przeglądarki i umieszczają własne menu HTML we właściwym miejscu.
źródło
Możesz obejrzeć ten samouczek: http://www.youtube.com/watch?v=iDyEfKWCzhg Upewnij się, że menu kontekstowe jest początkowo ukryte i ma pozycję bezwzględną. Zapewni to, że nie będzie wielu menu kontekstowych i bezużytecznego tworzenia menu kontekstowego. Link do strony znajduje się w opisie filmu na YouTube.
$(document).bind("contextmenu", function(event){ $("#contextmenu").css({"top": event.pageY + "px", "left": event.pageX + "px"}).show(); }); $(document).bind("click", function(){ $("#contextmenu").hide(); });
źródło
Wiem, że to też jest dość stare. Niedawno musiałem utworzyć menu kontekstowe, które wstrzykuję do innych witryn, które mają różne właściwości w oparciu o kliknięty element.
Jest to raczej trudne i są prawdopodobnie lepsze sposoby na osiągnięcie tego. Używa menu kontekstowego jQuery Biblioteka znajduje się tutaj
Podobało mi się tworzenie tego i pomyślałem, że może wam się przydać.
Oto skrzypce . Mam nadzieję, że może to komuś pomóc.
$(function() { function createSomeMenu() { var all_array = '{'; var x = event.clientX, y = event.clientY, elementMouseIsOver = document.elementFromPoint(x, y); if (elementMouseIsOver.closest('a')) { all_array += '"Link-Fold": {"name": "Link", "icon": "fa-external-link", "items": {"fold2-key1": {"name": "Open Site in New Tab"}, "fold2-key2": {"name": "Open Site in Split Tab"}, "fold2-key3": {"name": "Copy URL"}}},'; } if (elementMouseIsOver.closest('img')) { all_array += '"Image-Fold": {"name": "Image","icon": "fa-picture-o","items": {"fold1-key1": {"name":"Download Image"},"fold1-key2": {"name": "Copy Image Location"},"fold1-key3": {"name": "Go To Image"}}},'; } all_array += '"copy": {"name": "Copy","icon": "copy"},"paste": {"name": "Paste","icon": "paste"},"edit": {"name": "Edit HTML","icon": "fa-code"}}'; return JSON.parse(all_array); } // setup context menu $.contextMenu({ selector: 'body', build: function($trigger, e) { return { callback: function(key, options) { var m = "clicked: " + key; console.log(m); }, items: createSomeMenu() }; } }); });
źródło
Mam ładną i łatwą implementację przy użyciu bootstrapa, jak następuje.
<select class="custom-select" id="list" multiple></select> <div class="dropdown-menu" id="menu-right-click" style=> <h6 class="dropdown-header">Actions</h6> <a class="dropdown-item" href="" onclick="option1();">Option 1</a> <a class="dropdown-item" href="" onclick="option2();">Option 2</a> </div> <script> $("#menu-right-click").hide(); $(document).on("contextmenu", "#list", function (e) { $("#menu-right-click") .css({ position: 'absolute', left: e.pageX, top: e.pageY, display: 'block' }) return false; }); function option1() { // something you want... $("#menu-right-click").hide(); } function option2() { // something else $("#menu-right-click").hide(); } </script>
źródło