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 .

Are you getting the alert **Right**? Did you tried setting it to `auto`? — gurvinder372, Oct 26 '17 at 09:05
@EyRaG _ If `pointer-events: none;` then none of the events will fire. — Shiladitya, Oct 26 '17 at 09:13
@Shiladitya that's what i want , when i right click i want the canvas avoiding the click so the right click only work on the div that is under the canvas — , Oct 26 '17 at 09:18

score 1 · Accepted Answer · answered Oct 26 '17 at 09:36

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.

Why the Click event only fire one time ? Said nothing , kinda working a half because only 1 click is working /: — , Oct 26 '17 at 09:53
Ok , so the event is firing until i left click (once i'm in the div it stop work , i think it's some comptability problem with iviewer plug-in . well. — , Oct 26 '17 at 10:01

score 0 · Answer 2 · 2017-10-26T09:38:06.280

0

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.

edited Oct 26 '17 at 09:38

answered Oct 26 '17 at 09:04

I don't want to avoid the click , i need the click but working on the div that is under the canvas , so i need the pointer-events – Oct 26 '17 at 09:16
@EyRaG_ Then, try to make the div transparent and increase the z-index of the div and greater than that of canvas. – Parantap Parashar Oct 26 '17 at 09:18
@ParantapParashar How can i make the div transparent , and that's not what i want , if i do that all the content in the div will be transparent (there is an image in it) between : the canvas is front and div behind ) – Oct 26 '17 at 09:21
@EyRaG_ Check this [https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) – Parantap Parashar Oct 26 '17 at 09:23
@ParantapParashar i don't want to hide anything . just being able to click trough my canvas only with left click – Oct 26 '17 at 09:26
Could you use a `setTimeout` within the function? I'm not sure this would work in your case, but it might. Here we'd add the pointer event none on the left click and then remove it just after using a setTimeout. Answer and [JS Fiddle](https://jsfiddle.net/er7yvxrj/1/) links updated with this. – Oct 26 '17 at 09:38

score 0 · Answer 3 · answered Oct 26 '17 at 09:07

0

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.

answered Oct 26 '17 at 09:07

Benjamin Bloot

101
7

Won't work my wrapper is 2 layer under my div and 1 layer under my canvas . – Oct 26 '17 at 09:19

score 0 · Answer 4 · answered Oct 26 '17 at 09:37

0

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.

answered Oct 26 '17 at 09:37

Parantap Parashar

1,930
1
14
22

Well no , i'll edit my post maybe i explained myself wrong . i have a div with an image (viewer) when zoom and left click i can drag the image and move . but i want , when right clicking Draw Rectangle on the canvas (basically region of interest) so , when i right click i'm on the canvas and when i left click i want to be on the div so i can move my image . – Oct 26 '17 at 09:42
@EyRaG_ So you will switch the display as well? – Parantap Parashar Oct 26 '17 at 09:44
@PatantapParashar what do u mean by switch – Oct 26 '17 at 09:47
@EyRaG_ I mean that on the clicks will you toggle the visibility(hide/show) of the canvas and div or both will be shown all the time? – Parantap Parashar Oct 26 '17 at 09:50

Removing pointer-events : none property . Not working

4 Answers4