Making Custom Right-Click Context Menus for My Web-App

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

Answering your question - use contextmenu event, like below:

if (document.addEventListener) {  document.addEventListener('contextmenu', function(e) {    alert("You've tried to open context menu"); //here you draw your own menu    e.preventDefault();  }, false);} else {  document.attachEvent('oncontextmenu', function() {    alert("You've tried to open context menu");    window.event.returnValue = false;  });}

<body>  Lorem ipsum...</body>

How do I get a custom right-click context menu to show two links to a page on my site?

use that :D
HTML code:

      <script >

    if (document.addEventListener) { // IE >= 9;other browsers 
      document.addEventListener('contextmenu', function(e) {
       var modal = document.getElementById('myModal');
 modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
        e.preventDefault();
      }, false);
    } else { // IE < 9 
      document.attachEvent('oncontextmenu', function() {
         var modal = document.getElementById('myModal');
 modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
        window.event.returnValue = false;
      });
    }
  </script>

<p>custom contentmenu as modal </p>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
   <p> <a href=" https://rowurbux.weebly.com/contact.html">Contact</a></p>
     <p> <a href="https://rowurbux.weebly.com/support.html">Support</a></p>
  </div>

</div>

css code:

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

I change it for moodal opened after right mouse click xD
good luck xD

JavaScript right click context menus for different objects on a single canvas

You can handle right-clicks by listening for contextmenu events on the canvas:

// listen for contextmenu requests
canvas.addEventListener('contextmenu', handleMouseDown, false);

Here's an example that alerts differently for 2 different canvas rectangles:

var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();var offsetX=canvasOffset.left;var offsetY=canvasOffset.top;
var rects=[];
rects.push({x:50,y:50,width:50,height:50,color:"red"});rects.push({x:150,y:100,width:75,height:75,color:"blue"});
ctx.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<rects.length;i++){  var rect=rects[i];  ctx.beginPath();  ctx.fillStyle=rect.color;  ctx.rect(rect.x,rect.y,rect.width,rect.height);  ctx.fill();}
// listen for contextmenu requestscanvas.addEventListener('contextmenu', handleMouseDown, false);  
function handleMouseDown(e){
  // get mouse position relative to the canvas  var x=parseInt(e.clientX-offsetX);  var y=parseInt(e.clientY-offsetY);

  // check each rect for hits  for(var i=0;i<rects.length;i++){    var rect=rects[i];    var rectRight=rect.x+rect.width;    var rectBottom=rect.y+rect.height;
    // check each rect for hits    if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom  ){      alert("Context menu request on the "+rect.color+" rectangle.");    }  }
  // prevents the usual context from popping up  e.preventDefault()  return(false); }

body{ background-color: ivory; }canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h4>Right click in either rectangle.</h4><canvas id="canvas" width=300 height=300></canvas>

Overriding the right-click context menu in web browsers - pros and cons

You can't do that reliably anyway. In Firefox, go to Settings, Contents, JavaScript/Advanced (I'm guessing the captions, no English Firefox (; ) to override context menu behaviour and bang, your app doesn't work anymore. My online-banking application did this in their old version, so I couldn't do copy & paste with the mouse. I hated it, so I enabled the protection in Firefox and it worked. Kind of. Their new version doesn't do such bad things anymore.

Instead, use a little drop-down arrow where a context menu is needed, that can either be clicked or just hovered over to show the menu. JetBrains' TeamCity web app does that very well.

Make all events disabled unless a left click is made in case of custom context menu

Two directions,

A) disable each event you don't want to have, Ex. How to disable scrolling temporarily?

B) add a layer on top of the screen, and then put your widget on top of that, this is normally referred as Modal. Ex. https://github.com/reactjs/react-modal

I'll vote for B), seems this is a classical problem you are running into.