How to add a custom right-click menu to a webpage

Question

I want to add a custom right-click menu to my web application  Can this be done without using any pre-built libraries  If so  how to display a simple custom right-click menu which does not use a 3rd party JavaScript library   I m aiming for something like what Google Docs does  It lets users right-click and show the users their own menu   NOTE  I want to learn how to make my own versus using something somebody made already since most of the time  those 3rd party libraries are bloated with features whereas I only want features that I need so I want it to be completely hand-made by me

User · Accepted Answer

Answering your question - use contextmenu event  like below    x000D   x000D  if  document addEventListener    x000D    document addEventListener  contextmenu   function e    x000D      alert  You ve tried to open context menu      here you draw your own menu x000D      e preventDefault    x000D       false   x000D    else   x000D    document attachEvent  oncontextmenu   function     x000D      alert  You ve tried to open context menu    x000D      window event returnValue   false  x000D        x000D    x000D   lt body gt  x000D    Lorem ipsum    x000D   lt  body gt  x000D   x000D   x000D    But you should ask yourself  do you really want to overwrite default right-click behavior - it depends on application that you re developing     JSFIDDLE

User · Answer

You can do it with this code  visit here for full tutorial with automatic edge detection http   www voidtricks com custom-right-click-context-menu      document  ready function          html   on  contextmenu  function e             prevent default context menu for right click         e preventDefault             var menu       menu                hide menu if already shown         menu hide                get x and y values of the click event         var pageX   e pageX          var pageY   e pageY             position menu div near mouse cliked area         menu css  top  pageY   left  pageX             var mwidth   menu width            var mheight   menu height            var screenWidth     window  width            var screenHeight     window  height               if window is scrolled         var scrTop     window  scrollTop               if the menu is close to right edge of the window         if pageX mwidth  gt  screenWidth           menu css  left pageX-mwidth                         if the menu is close to bottom edge of the window         if pageY mheight  gt  screenHeight scrTop           menu css  top pageY-mheight                         finally show the menu         menu show               html   on  click   function         menu   hide

User · Answer

You could try simply blocking the context menu by adding the following to your body tag    lt body oncontextmenu  return false   gt    This will block all access to the context menu  not just from the right mouse button but from the keyboard as well     P S  you can add this to any tag you want to disable the context menu on  for example    lt div class  mydiv  oncontextmenu  return false   gt    Will disable the context menu in that particular div only

User · Answer

Try this   x000D   x000D  var cls   true  var ops   window onload   function         document querySelector   container   addEventListener  mouseenter   function             cls   false              document querySelector   container   addEventListener  mouseleave   function             cls   true              ops   document querySelectorAll   container td        for  let i   0  i  lt  ops length  i              ops i  addEventListener  click   function                 document querySelector   position   style display    none                             IMPOSTARE LE VARIE OPZIONI         ops 0  addEventListener  click   function             setTimeout function                    YOUR FUNCTION                alert  Alert 1                50                ops 1  addEventListener  click   function             setTimeout function                    YOUR FUNCTION                alert  Alert 2                50                ops 2  addEventListener  click   function             setTimeout function                    YOUR FUNCTION                alert  Alert 3                50                ops 3  addEventListener  click   function             setTimeout function                    YOUR FUNCTION                alert  Alert 4                50                ops 4  addEventListener  click   function             setTimeout function                    YOUR FUNCTION                alert  Alert 5                50              document addEventListener  contextmenu   function         var e   window event      e preventDefault        document querySelector   container   style padding    0px        var x   e clientX      var y   e clientY       var docX   window innerWidth    document documentElement clientWidth    document body clientWidth    document body offsetWidth      var docY   window innerHeight    document documentElement clientHeight    document body clientHeight    document body offsetHeight       var border   parseInt getComputedStyle document querySelector   container    null  getPropertyValue  border-width          var objX   parseInt getComputedStyle document querySelector   container    null  getPropertyValue  width      2      var objY   parseInt getComputedStyle document querySelector   container    null  getPropertyValue  height      2       if  x   objX  gt  docX            let diff    x   objX  - docX          x -  diff   border             if  y   objY  gt  docY            let diff    y   objY  - docY          y -  diff   border             document querySelector   position   style display    block        document querySelector   position   style top   y    px       document querySelector   position   style left   x    px        window addEventListener  resize   function         document querySelector   position   style display    none        document addEventListener  click   function         if  cls            document querySelector   position   style display    none              document addEventListener  wheel   function         if  cls            document querySelector   position   style display    none           static   false            x000D   position       position  absolute      width  1px      height  1px      z-index  2      display  none      container       width  220px      height  auto      border  1px solid black      background  rgb 245  243  243       container p       height  30px      font-size  18px      font-family  arial      width  99       cursor  pointer      display  flex      justify-content  center      align-items  center      background  rgb 245  243  243       color  black      transition  0 2s      container p hover       background  lightblue     td       font-family  arial      font-size  20px     td hover       background  lightblue      transition  0 2s      cursor  pointer    x000D   lt div class  position  gt       lt div class  container  align  center  gt           lt table style  text-align  left  width  99   margin-left  auto  margin-right  auto   border  0  cellpadding  2  cellspacing  2  gt               lt tbody gt                   lt tr gt                       lt td style  vertical-align  middle  text-align  center   gt Option 1 lt br gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td style  vertical-align  middle  text-align  center   gt Option 2 lt br gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td style  vertical-align  middle  text-align  center   gt Option 3 lt br gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td style  vertical-align  middle  text-align  center   gt Option 4 lt br gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td style  vertical-align  middle  text-align  center   gt Option 5 lt br gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Pure JS and css solution for a truly dynamic right click context menu  albeit based on predefined naming conventions for the elements id  links etc   jsfiddle and the code you could copy paste into a single static html page     x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt style gt  x000D       cls-context-menu-link   x000D        display  block  x000D        padding  20px  x000D        background   ECECEC  x000D        x000D       x000D       cls-context-menu   x000D        position  absolute  x000D        display  none  x000D        x000D       x000D       cls-context-menu ul  x000D       context-menu li   x000D        list-style  none  x000D        margin  0  x000D        padding  0  x000D        background  white  x000D        x000D       x000D       cls-context-menu   x000D        border  solid 1px  CCC  x000D        x000D       x000D       cls-context-menu li   x000D        border-bottom  solid 1px  CCC  x000D        x000D       x000D       cls-context-menu li last-child   x000D        border  none  x000D        x000D       x000D       cls-context-menu li a   x000D        display  block  x000D        padding  5px 10px  x000D        text-decoration  none  x000D        color  blue  x000D        x000D       x000D       cls-context-menu li a hover   x000D        background  blue  x000D        color   FFF  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt  -- those are the links which should present the dynamic context menu -- gt  x000D     lt a id  link-1  href     class  cls-context-menu-link  gt right click link-01 lt  a gt  x000D     lt a id  link-2  href     class  cls-context-menu-link  gt right click link-02 lt  a gt  x000D   x000D     lt  -- this is the context menu -- gt  x000D     lt  -- note the string to 0 where the 0 is the digit to be replaced -- gt  x000D     lt div id  div-context-menu  class  cls-context-menu  gt  x000D       lt ul gt  x000D         lt li gt  lt a href   to 0  gt link-to 0 -item-1  lt  a gt  lt  li gt  x000D         lt li gt  lt a href   to 0  gt link-to 0 -item-2  lt  a gt  lt  li gt  x000D         lt li gt  lt a href   to 0  gt link-to 0 -item-3  lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   x000D     lt script gt  x000D      var rgtClickContextMenu   document getElementById  div-context-menu    x000D   x000D          close the right click context menu on click anywhere else in the page   x000D      document onclick   function e    x000D        rgtClickContextMenu style display    none   x000D        x000D   x000D          x000D       present the right click context menu ONLY for the elements having the right class x000D       by replacing the 0 or any digit after the  to-  string with the element id   which x000D       triggered the event x000D         x000D      document oncontextmenu   function e    x000D          alert e target id  x000D        var elmnt   e target x000D        if  elmnt className startsWith  cls-context-menu      x000D          e preventDefault    x000D          var eid   elmnt id replace  link-       x000D          rgtClickContextMenu style left   e pageX    px  x000D          rgtClickContextMenu style top   e pageY    px  x000D          rgtClickContextMenu style display    block  x000D          var toRepl    to     eid toString   x000D          rgtClickContextMenu innerHTML   rgtClickContextMenu innerHTML replace  to  d  g  toRepl  x000D            alert rgtClickContextMenu innerHTML toString    x000D          x000D        x000D     lt  script gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt html gt   lt head gt   lt style gt   rightclick          YOUR CONTEXTMENU S CSS        visibility  hidden      background-color  white      border  1px solid grey      width  200px      height  300px     lt  style gt   lt  head gt   lt body gt     lt div class  rightclick  id  ya  gt       lt p onclick  alert  choc-a-late    gt I like chocolate lt  p gt  lt br gt  lt p onclick  awe-so-me  gt I AM AWESOME lt  p gt     lt  div gt     lt p gt Right click to get sweet results  lt  p gt   lt  body gt   lt script gt      document onclick   noClick      document oncontextmenu   rightClick      function rightClick e            e   e    window event          e preventDefault            document getElementById  ya   style visibility    visible           console log  Context Menu v1 3 0 by IamGuest opened          function noClick         document getElementById  ya   style visibility    hidden       console log  Context Menu v1 3 0 by IamGuest closed        lt  script gt   lt  -- Coded by IamGuest  Thank you for using this code  -- gt   lt  html gt    You can tweak and modify this code to make a better looking  more efficient contextmenu  As for modifying an existing contextmenu  I m not sure how to do that    Check out this fiddle for an organized point of view  Also  try clicking the items in my contextmenu  They should alert you a few awesome messages  If they don t work  try something more    complex

User · Answer

lt script language  javascript  type  text javascript  gt    document oncontextmenu   RightMouseDown     document onmousedown   mouseDown      function mouseDown e        if  e which  3     righClick       alert  Right-click menu goes here                  function RightMouseDown          return false        lt  script gt   lt  body gt    lt  html gt

User · Answer

According to the answers here and on other  flows  I ve made a version that looks like the one of Google Chrome  with css3 transition   JS Fiddle  Lets start eazy  since we have the js above on this page  we can worry about the css and layout  The layout that we will be using is an  lt a gt  element with a  lt img gt  element or a font awesome icon   lt i class  fa fa-flag  gt  lt  i gt   and a  lt span gt  to show the keyboard shortcuts  So this is the structure    lt a href     onclick  doSomething    gt     lt img src  path to image gif    gt    This is a menu option    lt span gt Ctrl   K lt  span gt   lt  a gt    We will put these in a div and show that div on the right-click  Let s style them like in Google Chrome  shall we    menu a     display  block    color   555    text-decoration  no        Now we will add the code from the accepted answer  and get the X and Y value of the cursor  To do this  we will use e clientX and e clientY  We are using client  so the menu div has to be fixed   var i   document getElementById  menu   style  if  document addEventListener      document addEventListener  contextmenu   function e        var posX   e clientX      var posY   e client        And that is it  Just add the css transisions to fade in and out  and done   x000D   x000D  var i   document getElementById  menu   style  x000D  if  document addEventListener    x000D    document addEventListener  contextmenu   function e    x000D      var posX   e clientX  x000D      var posY   e clientY  x000D      menu posX  posY   x000D      e preventDefault    x000D       false   x000D    document addEventListener  click   function e    x000D      i opacity    0   x000D      setTimeout function     x000D        i visibility    hidden   x000D         501   x000D       false   x000D    else   x000D    document attachEvent  oncontextmenu   function e    x000D      var posX   e clientX  x000D      var posY   e clientY  x000D      menu posX  posY   x000D      e preventDefault    x000D        x000D    document attachEvent  onclick   function e    x000D      i opacity    0   x000D      setTimeout function     x000D        i visibility    hidden   x000D         501   x000D        x000D    x000D   x000D  function menu x  y    x000D    i top   y    px   x000D    i left   x    px   x000D    i visibility    visible   x000D    i opacity    1   x000D    x000D  body   x000D    background  white  x000D    font-family  sans-serif  x000D    color   5e5e5e  x000D    x000D   x000D   menu   x000D    visibility  hidden  x000D    opacity  0  x000D    position  fixed  x000D    background   fff  x000D    color   555  x000D    font-family  sans-serif  x000D    font-size  11px  x000D    -webkit-transition  opacity  5s ease-in-out  x000D    -moz-transition  opacity  5s ease-in-out  x000D    -ms-transition  opacity  5s ease-in-out  x000D    -o-transition  opacity  5s ease-in-out  x000D    transition  opacity  5s ease-in-out  x000D    -webkit-box-shadow  2px 2px 2px 0px rgba 143  144  145  1   x000D    -moz-box-shadow  2px 2px 2px 0px rgba 143  144  145  1   x000D    box-shadow  2px 2px 2px 0px rgba 143  144  145  1   x000D    padding  0px  x000D    border  1px solid  C6C6C6  x000D    x000D   x000D   menu a   x000D    display  block  x000D    color   555  x000D    text-decoration  none  x000D    padding  6px 8px 6px 30px  x000D    width  250px  x000D    position  relative  x000D    x000D   x000D   menu a img  x000D   menu a i fa   x000D    height  20px  x000D    font-size  17px  x000D    width  20px  x000D    position  absolute  x000D    left  5px  x000D    top  2px  x000D    x000D   x000D   menu a span   x000D    color   BCB1B3  x000D    float  right  x000D    x000D   x000D   menu a hover   x000D    color   fff  x000D    background   3879D9  x000D    x000D   x000D   menu hr   x000D    border  1px solid  EBEBEB  x000D    border-bottom  0  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 5 0 css font-awesome min css  rel  stylesheet   gt  x000D   lt h2 gt CSS3 and JAVASCRIPT custom menu  lt  h2 gt  x000D   lt em gt Stephan Stanisic   Lisence free lt  em gt  x000D   lt p gt Right-click anywhere on this page to open the custom menu  Styled like the Google Chrome contextmenu  And yes  you can use  lt i class  fa fa-flag  gt  lt  i gt font-awesome lt  p gt  x000D   lt p style  font-size  small  gt  x000D     lt b gt Lisence lt  b gt  x000D     lt br   gt   THE PIZZA-WARE LICENSE   Revision 42   x000D     lt br   gt  You can do whatever you want with this stuff  If we meet some day  and you think this stuff is worth it  you can buy me a Pizza in return  x000D     lt br   gt  x000D     lt a style  font-size xx-small  href  https   github com KLVN UrbanDictionary API license  gt https   github com KLVN UrbanDictionary API license lt  a gt  x000D   lt  p gt  x000D   lt br   gt  x000D   lt br   gt  x000D   lt small gt  The white body background is just because I hate the light blue editor background on the result on jsfiddle  lt  small gt  x000D   lt div id  menu  gt  x000D     lt a href     gt  x000D       lt img src  http   puu sh nr60s 42df867bf3 png    gt  AdBlock Plus  lt span gt Ctrl      lt  span gt  x000D     lt  a gt  x000D     lt a href     gt  x000D       lt img src  http   puu sh nr5Z6 4360098fc1 png    gt  SNTX  lt span gt Ctrl      lt  span gt  x000D     lt  a gt  x000D     lt hr   gt  x000D     lt a href     gt  x000D       lt i class  fa fa-fort-awesome  gt  lt  i gt  Fort Awesome  lt span gt Ctrl      lt  span gt  x000D     lt  a gt  x000D     lt a href     gt  x000D       lt i class  fa fa-flag  gt  lt  i gt  Font Awesome  lt span gt Ctrl      lt  span gt  x000D     lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A combination of some nice CSS and some non-standard html tags with no external libraries can give a nice result  JSFiddle   HTML   lt menu id  ctxMenu  gt       lt menu title  File  gt           lt menu title  Save  gt  lt  menu gt           lt menu title  Save As  gt  lt  menu gt           lt menu title  Open  gt  lt  menu gt       lt  menu gt       lt menu title  Edit  gt           lt menu title  Cut  gt  lt  menu gt           lt menu title  Copy  gt  lt  menu gt           lt menu title  Paste  gt  lt  menu gt       lt  menu gt   lt  menu gt    Note  the menu tag does not exist  I m making it up  you can use anything   CSS   ctxMenu      display none      z-index 100    menu       position absolute      display block      left 0px      top 0px      height 20px      width 20px      padding 0      margin 0      border 1px solid      background-color white      font-weight normal      white-space nowrap    menu hover      background-color  eef      font-weight bold    menu hover  gt  menu      display block    menu  gt  menu      display none      position relative      top -20px      left 100       width 55px    menu title  before      content attr title     menu not  title   before      content   2630       The JavaScript is just for this example  I personally remove it for persistent menus on windows  var notepad   document getElementById  notepad    notepad addEventListener  contextmenu  function event       event preventDefault        var ctxMenu   document getElementById  ctxMenu        ctxMenu style display    block       ctxMenu style left    event pageX - 10   px       ctxMenu style top    event pageY - 10   px     false   notepad addEventListener  click  function event       var ctxMenu   document getElementById  ctxMenu        ctxMenu style display           ctxMenu style left           ctxMenu style top         false     Also note  you can potentially modify menu  gt  menu left 100    to menu  gt  menu right 100    for a menu that expands from right to left  You would need to add a margin or something somewhere though

User · Answer

I know this has already been answered  but I spent some time wrestling with the second answer to get the native context menu to disappear and have it show up where the user clicked  HTML   lt body gt       lt div id  test1  gt           lt a href  www google com  class  test  gt Google lt  a gt           lt a href  www google com  class  test  gt Link 2 lt  a gt           lt a href  www google com  class  test  gt Link 3 lt  a gt           lt a href  www google com  class  test  gt Link 4 lt  a gt       lt  div gt        lt  -- initially hidden right-click menu -- gt       lt div class  hide  id  rmenu  gt           lt ul gt               lt li class  White  gt White lt  li gt               lt li gt Green lt  li gt               lt li gt Yellow lt  li gt               lt li gt Orange lt  li gt               lt li gt Red lt  li gt               lt li gt Blue lt  li gt           lt  ul gt       lt  div gt   lt  body gt    CSS   hide     display  none      rmenu     border  1px solid black    background-color  white      rmenu ul     padding  0    list-style  none     rmenu li     list-style  none    padding-left  5px    padding-right  5px      JavaScript  if  document getElementById  test1   addEventListener        document getElementById  test1   addEventListener  contextmenu   function e                    rmenu   toggleClass  hide                    rmenu   css                                  position   absolute                   top  e pageY                  left  e pageX                                            e preventDefault            false         this is from another SO post        document  bind  click   function event      document getElementById  rmenu   className    hide         CodePen Example

User · Answer

lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt head gt    lt title gt Context menu - LabLogic net lt  title gt    lt  head gt   lt body gt    lt script language  javascript  type  text javascript  gt   document oncontextmenu RightMouseDown  document onmousedown   mouseDown      function mouseDown e        if  e which  3     righClick         alert  Right-click menu goes here              function RightMouseDown     return false      lt  script gt    lt  body gt   lt  html gt    Tested and works in Opera 11 6  firefox 9 01  Internet Explorer 9 and chrome 17 You can check out a working sample at javascript right click menu

User · Answer

Tested and works in Opera 12 17  firefox 30  Internet Explorer 9 and chrome 26 0 1410 64   document oncontextmenu  function  evt            alert  OK             return false

User · Answer

I use something similar to the following jsfiddle  function onright el  cb          disable right click     document body oncontextmenu    return false       el addEventListener  contextmenu   function  e    e preventDefault    return false         el addEventListener  mousedown   function  e            e   e    window event          if     e button      2                if  e preventDefault                    e preventDefault                  else                   e returnValue   false                            return false                            then bind Your cb     el addEventListener  mousedown   function  e            e   e    window event             e button      2  amp  amp  cb call el  e               if You target older IE browsers you should anyway complete it with the   attachEvent  case

User · Answer

Simplest jump start function  create a context menu at the cursor position  that destroys itself on mouse leave   x000D   x000D  oncontextmenu    e    gt      e preventDefault     let menu   document createElement  div     menu id    ctxmenu    menu style    top   e pageY-10 px left   e pageX-40 px    menu onmouseleave        gt  ctxmenu outerHTML        menu innerHTML     lt p gt Option1 lt  p gt  lt p gt Option2 lt  p gt  lt p gt Option3 lt  p gt  lt p gt Option4 lt  p gt  lt p onclick  alert  Thank you     gt Upvote lt  p gt     document body appendChild menu    x000D   ctxmenu     position  fixed    background ghostwhite    color  black    cursor  pointer    border  1px black solid     ctxmenu  gt  p     padding  0 1rem    margin  0     ctxmenu  gt  p hover     background  black    color  ghostwhite   x000D   x000D   x000D

User · Answer

lt script gt  function fun    document getElementById  menu   style display  block       lt  script gt   lt div id  menu  style  display  none  gt  menu items lt  div gt    lt body oncontextmenu  fun   return false   gt    What I m doing up here   Creat your own custom div menu and set the position  absolute and display none in case  Add to the page or element to be clicked the oncontextmenu event  Cancel the default browser action with return false  User js to invoke your own actions

User · Answer

A simple way you could do it is use onContextMenu to return a JavaScript function    lt input type  button  value  Example  onContextMenu  return RightClickFunction     gt    lt script gt   function RightClickFunction          Enter your code here    return false      lt  script gt    And by entering return false  you will cancel out the context menu   if you still want to display the context menu you can just remove the return false  line

User · Answer

Try This    function     var doubleClicked   false    document  on  contextmenu   function  e    if doubleClicked    false    e preventDefault       To prevent the default context menu  var windowHeight     window  height   2  var windowWidth     window  width   2  if e clientY  gt  windowHeight  amp  amp  e clientX  lt   windowWidth          contextMenuContainer   css  left   e clientX         contextMenuContainer   css  bottom     window  height  -e clientY         contextMenuContainer   css  right    auto          contextMenuContainer   css  top    auto      else if e clientY  gt  windowHeight  amp  amp  e clientX  gt  windowWidth          contextMenuContainer   css  right     window  width  -e clientX         contextMenuContainer   css  bottom     window  height  -e clientY         contextMenuContainer   css  left    auto          contextMenuContainer   css  top    auto      else if e clientY  lt   windowHeight  amp  amp  e clientX  lt   windowWidth          contextMenuContainer   css  left   e clientX         contextMenuContainer   css  top   e clientY         contextMenuContainer   css  right    auto          contextMenuContainer   css  bottom    auto      else         contextMenuContainer   css  right     window  width  -e clientX         contextMenuContainer   css  top   e clientY         contextMenuContainer   css  left    auto          contextMenuContainer   css  bottom    auto           contextMenuContainer   fadeIn 500  FocusContextOut       doubleClicked   true    else     e preventDefault      doubleClicked   false        contextMenuContainer   fadeOut 500         function FocusContextOut        document  on  click   function         doubleClicked   false          contextMenuContainer   fadeOut 500        document  off  click                            http   jsfiddle net AkshayBandivadekar zakn7Lwb 14

User · Answer

Here is a very good tutorial on how to build a custom context menu with a full working code example  without JQuery and other libraries    You can also find their demo code on GitHub   They give a detailed step-by-step explanation that you can follow along to build your own right-click context menu  including html  css and javascript code  and summarize it at the end by giving the complete example code   You can follow along easily and adapt it to your own needs  And there is no need for JQuery or other libraries   This is how their example menu code looks like    lt nav id  context-menu  class  context-menu  gt       lt ul class  context-menu  items  gt         lt li class  context-menu  item  gt           lt a href     class  context-menu  link  data-action  View  gt  lt i class  fa fa-eye  gt  lt  i gt  View Task lt  a gt         lt  li gt         lt li class  context-menu  item  gt           lt a href     class  context-menu  link  data-action  Edit  gt  lt i class  fa fa-edit  gt  lt  i gt  Edit Task lt  a gt         lt  li gt         lt li class  context-menu  item  gt           lt a href     class  context-menu  link  data-action  Delete  gt  lt i class  fa fa-times  gt  lt  i gt  Delete Task lt  a gt         lt  li gt       lt  ul gt     lt  nav gt    A working example  task list  can be found on codepen

User · Answer

You should remember if you want to use the Firefox only solution  if you want to add it to the whole document you should add contextmenu  mymenu  to the  lt html gt  tag not to the body tag  You should pay attention to this

User · Answer

Was very useful for me  For the sake of people like me  expecting the drawing of menu  I put here the code I used to make the right-click menu   x000D   x000D    document  ready function         if      test   addEventListener            test   addEventListener  contextmenu   function e          alert  You ve tried to open context menu      here you draw your own menu       e preventDefault           false       else          document getElementById  test   attachEvent  oncontextmenu   function               test   bind  contextmenu   function            body   on  contextmenu    a test   function               alert  contextmenu  event         document getElementById  rmenu   className    show         document getElementById  rmenu   style top   mouseY event     px         document getElementById  rmenu   style left   mouseX event     px          window event returnValue   false                         this is from another SO post        document  bind  click   function event      document getElementById  rmenu   className    hide          function mouseX evt      if  evt pageX        return evt pageX      else if  evt clientX        return evt clientX    document documentElement scrollLeft         document documentElement scrollLeft         document body scrollLeft       else       return null         function mouseY evt      if  evt pageY        return evt pageY      else if  evt clientY        return evt clientY    document documentElement scrollTop         document documentElement scrollTop         document body scrollTop       else       return null        x000D   show     z-index  1000    position  absolute    background-color   C0C0C0    border  1px solid blue    padding  2px    display  block    margin  0    list-style-type  none    list-style  none      hide     display  none      show li     list-style  none      show a     border  0  important    text-decoration  none      show a hover     text-decoration  underline  important    x000D   lt  -- jQuery should be at least version 1 7 -- gt   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt   lt script src  contextmenu js  gt  lt  script gt   lt link rel  stylesheet  href  contextmenu css    gt     lt div id  test1  gt     lt a href  www google com  class  test  gt Google lt  a gt     lt a href  www google com  class  test  gt Link 2 lt  a gt     lt a href  www google com  class  test  gt Link 3 lt  a gt     lt a href  www google com  class  test  gt Link 4 lt  a gt   lt  div gt    lt  -- initially hidden right-click menu -- gt   lt div class  hide  id  rmenu  gt     lt ul gt       lt li gt         lt a href  http   www google com  gt Google lt  a gt       lt  li gt        lt li gt         lt a href  http   localhost 8080 login  gt Localhost lt  a gt       lt  li gt        lt li gt         lt a href  C    gt C lt  a gt       lt  li gt     lt  ul gt   lt  div gt  x000D   x000D   x000D

[javascript] How to add a custom right-click menu to a webpage?

Examples related to javascript

Examples related to contextmenu

Examples related to right-click