JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<br />                         
  <div id="viewer2" class="viewer" style="width:800px; height:300px; position: absolute; z-index : 0;"></div>
  <canvas id="paper" width="800" height="300" style="border:1px solid #ccc;position: absolute; z-index : 1;"></canvas>           
  <br />
</div>

JavaScript

$('.viewer').bind('contextmenu', function(e) {
   return false;
});
$('#paper').bind('contextmenu', function(e) {
   return false;
});
document.getElementById('paper').onmousedown =FuncOnClick;
document.getElementById('viewer2').onmousedown =FuncOnClick;

function FuncOnClick(event) {
   console.log(event.which);
   switch (event.which) {
      case 1:
         document.getElementById("paper").style.pointerEvents = "none";
         alert('Left');
         $('#viewer2').css('z-index', '1');
         $('#paper').css('z-index', '-1');
         break;
      case 3:
         document.getElementById("paper").style.pointerEvents = "";
         alert('Right ');
         break;
   }
}