how to write your own right click menu and disable the default using jquery/javascript how to write your own right click menu and disable the default using jquery/javascript javascript javascript

how to write your own right click menu and disable the default using jquery/javascript


There are various jQuery context menu plugins out there, ready to use:


This example works, though it is cheesy. What you could do in your contextmenu handler is show a DIV at a specific location on the screen with items of your choosing. As far as I know, there is no way to customize the items within the context menu that appears when you right-click on elements.

<html>  <head>    <title>Context menu test</title>      <style type="text/css">      .element {        background-color: blue;        height: 300px;        width: 300px;      }      .popup {        background-color: red;        border: 1px solid black;        width: 100px;        height: 100px;        position: absolute;       }    </style>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">      $(function() {          $(".element").contextmenu          (            function(e) {              $("div.popup").remove();              $("<div class='popup'>Hi</div>").appendTo("body")                .css("left", e.pageX)                .css("top", e.pageY)                .show();              e.preventDefault();  // return false; also works            }          );        }      );      $.fn.contextmenu = function(func) {        return this.bind("contextmenu", func);      }    </script>  </head>  <body>    <div class="element"></div>  </body></html>


There is this plugin too: Audero Context Menu. It is free and very simple to use.