Disable Right Click and Show Div

To do this we need 2 node, One is the div which the right click is to be disabled and the other is the div which going to show instead of “contextmenu”.

 var rClickDisabledDiv = document.getElementsByClassName("rightClickDisabled")[0];
 var showDivNode = document.getElementsByClassName("showDiv")[0];

The key here is how to disable the right click.

  rClickDisabledDiv.addEventListener("contextmenu",function(e){
      showDivNode.style.display = "block";
      showDivNode.style.top = e.pageY+"px";
      showDivNode.style.left = e.pageX+"px";
      e.preventDefault();
  });

Rest will be piece of cake 🙂

function divOnRightClick(rClickDisabledDiv, showDivNode){
  rClickDisabledDiv.addEventListener("contextmenu",function(e){
      showDivNode.style.display = "block";
      showDivNode.style.top = e.pageY+"px";
      showDivNode.style.left = e.pageX+"px";
      e.preventDefault();
  });
  document.body.addEventListener("click",function(){
    showDivNode.style.display = "none";
  });
  showDivNode.addEventListener("click",function(e){
    e.stopImmediatePropagation();
  });
}

Demo

Advertisements

JavaScript Design Patterns

Creational Patterns   Abstract Factory Creates an instance of several families of classes   Builder Separates object construction from its representation   Factory Method Creates an instance of sev…

Source: JavaScript Design Patterns

JavaScript Cascade function

In a cascade, we can call many methods on the same object in sequence in a single statement. The trick is that the method itself should only return this. That way, each time you chain these methods…

Source: JavaScript Cascade function