Removing pointer-events : none property . Not working

Question

I want to remove the pointer-events :none property when I right click . that's what I actually tried .

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;

function FuncOnClick(event) {
   console.log(event.which);
   switch (event.which) {
      case 1:
         document.getElementById("paper").style.pointerEvents = "none";
         alert('Left');
         break;
      case 3:
         document.getElementById("paper").style.pointerEvents = "";
         alert('Right ');
         break;
   }
}

What I'm trying is to check if it's right or left click and if it's right it click on the canvas and it's left it click on the div. But when I Right click the pointer-events is staying with 'none' value .

What can I do to easily remove the pointer-events attribute and do it before the click is fired (like I did in the code the click is going to click before the pointer-events is edited ?)

EDIT : Added Z-index to make it a bit clearlier

EDIT #2

My DIV contain an image that i can move with right click and zoom with mousewheel . My canvas is here because i want to draw some rectangle (region of interest) . I want to draw these rectangle with right click . When i left click i can drag my image (div) When i right click i want to draw rectangle on (canvas)

So what i need is to be able to pass trough the canvas when i right click .

Answer 1

Depending on how you're planning on using this, you could try adding return false to the left click event. So the JavaScript would look like this:

$('.viewer').bind('contextmenu', function(e) {
   return false;
});
$('#paper').bind('contextmenu', function(e) {
   return false;
});

document.getElementById('paper').onmousedown = FuncOnClick;

function FuncOnClick(event) {
   console.log(event.which);
   switch (event.which) {
      case 1:
         document.getElementById("paper").style.pointerEvents = "none";

         setTimeout(function(){
            document.getElementById("paper").style.pointerEvents = "all";
         }, 500)

         alert('Left');

         break;
      case 3:
         document.getElementById("paper").style.pointerEvents = "all";
         alert('Right ');
         break;
   }
}

The left click event.which is still being console logged, but the alert won't run because of the return false . Here's a JS Fiddle example.

Answer updated following comments.

Answer 2

Try to document.getElementById('wrapper').onmousedown = FuncOnClick; set the listener on to the wrapper.

(don't forget to make an unique id instead of "wrapper")

"paper" is initialized with pointer-events: none; so its not emitting any events.

Answer 3

Here you go with a solution https://jsfiddle.net/usqmkbg2/

 $('.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(event.target.id + ' Left'); $('#viewer2').css('z-index', '1'); $('#paper').css('z-index', '-1'); break; case 3: document.getElementById("paper").style.pointerEvents = ""; alert(event.target.id + ' Right '); break; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Hope this will help you.

Answer 4

Try this:

HTML:

    <div id="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:

document.getElementById('wrapper').onmousedown =FuncOnClick;

function FuncOnClick(event, clickNeeded) {
   switch (event.which) {
     case 1:
        document.getElementById('viewer').onmousedown();
        break;
    case 3:
        document.getElementById('paper').onmousedown();
        break;
    }
}

And make the wrapper an transaparent overlay for both of the div.

Hope it is what you meant.