right click context menu jquery

Question

Does anybody have any code for a jquery context menu? Just need a div popup at pointer position when right mouse button pressed.

Have you done a Google Search? There are many many scripts that point this out. — Sander, Jan 20 '11 at 13:41
I found a very simple script that can do this (from another Stackoverflow question): http://stackoverflow.com/a/4502207/975097 — Anderson Green, Dec 14 '12 at 20:38

score 7 · Answer 1 · edited May 23 '17 at 12:08

Here is what I found:

Right Click Context Menu Using Jquery and asp.net - Code Project Article

Plugins tagged Right Click Menu on Jquery website

Interestingly, the dogo library has a standard set of UI widgets, and the context menu is part of that standard UI set. (The dojo library is nice and pretty with a standard look)

Dojo is a separate javascript library just like JQuery. Not sure how completely compatible dojo is with jquery, but there are ways to get them both working together if you want to.

Lord Google gave me most of the answers ;)

Similar SO questions that might be helpful:
jQuery Right-Click Context Menu Help!
jquery context menu plugin - Where is the right click event type?
JavaScript: Capturing right click and disabling menu only within certain element

Subin · Answer 2 · 2016-02-24T15:30:30.587

5

Here is a plugin: jQuery Context Menu

edited Feb 24 '16 at 15:30

answered Oct 02 '12 at 15:12

Subin

3,445
1
34
63

The link is dead – BingLi224 Aug 19 '23 at 04:42

score 2 · Answer 3 · answered Oct 27 '18 at 18:39

This can easily be achieved by using the event listener in jQuery, here is a clean and fast way of doing it:

//Now add the jQuery
$(document).ready(function() { //Just starting up here
  var menu = $('.menu');//get the menu
  $(document).on('contextmenu', function(e) {//What this does is simply; if right-click, run function(contains an event)
    e.preventDefault();//Prevent the default action: the normal right-click-menu to show
    menu.css({
      display: 'block',//show the menu
      top: e.pageY,//make the menu be where you click (y)
      left: e.pageX//make the menu be where you click (x)
    });
  });
  $(document).click(function() { //When you left-click
    menu.css({ display: 'none' });//Hide the menu
  });
});

/* just some css to display it */
.menu {
  background: #fff;
  width: 60px;
  padding: 3px 10px;
  box-shadow: 0 0 10px -3px rgba(0, 0, 0, .3);
  border: 1px solid #ccc;
  display: none;
  position: absolute;//this is important
}

<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add some HTML for the menu -->
<div class="menu">
  <p>Option 1</p>
  <p>Option 2</p>
</div>

Aurelio De Rosa · Answer 4 · 2013-04-16T15:25:35.637

0

Another plugin you can use is one developed by me called Audero Context Menu.

edited Apr 16 '13 at 15:25

answered Dec 29 '12 at 13:47

Aurelio De Rosa

21,856
8
48
71

score 0 · Answer 5 · answered Jul 19 '19 at 07:39

<!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>

code-only answers aren't answers IMO - add explanation so the OP and future readers can learn from it. — treyBake, Aug 19 '19 at 09:14

right click context menu jquery

5 Answers5