删除指针事件：none属性。 不工作

Question

我想在右键单击时删除指针事件：none属性。 那就是我真正尝试过的。

的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>

Java脚本

$('.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;
   }
}

我正在尝试的是检查它是右键单击还是左键单击，如果正确，则单击画布，然后单击div。 但是，当我右键单击时，指针事件保持为'none'值。

我该如何做才能轻松删除指标事件属性，并在触发点击之前执行该操作（就像我在代码中所做的那样，在指针事件编辑之前，点击将要单击？）

编辑：添加了Z索引，使其更加清晰

编辑＃2

我的DIV包含一个我可以右键单击并使用鼠标滚轮缩放的图像。 我的画布在这里是因为我想绘制一些矩形（感兴趣的区域）。 我想用右键单击绘制这些矩形。 当我单击鼠标左键时，我可以拖动图像（div）当我单击鼠标左键时，我想在（画布）上绘制矩形

所以我需要的是当我右键单击时能够通过画布。

Answer 1

根据您打算如何使用它，您可以尝试将return false添加到左击事件。 因此，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";

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

         alert('Left');

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

左键单击event.which该event.which仍在控制台中记录，但是由于return false ，因此警报不会运行。 这是一个JS Fiddle示例。

回答以下评论更新。

Answer 2

尝试document.getElementById('wrapper').onmousedown = FuncOnClick; 将监听器设置为包装器。

（不要忘记制作一个唯一的ID而不是“包装器”）

“ paper”用指针事件初始化：none; 因此它不会发出任何事件。

Answer 3

在这里您可以找到解决方案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> 

希望这会帮助你。

Answer 4

尝试这个：

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;
    }
}

并使包装器成为两个div的透明覆盖层。

希望这就是你的意思。