Question

我想在右键单击时删除pointer-events：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>

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

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

我可以做些什么来轻松删除指针事件属性并在点击触发之前执行此操作（就像我在编辑指针事件之前单击要点击的代码中所做的那样？）

编辑：添加了Z-index以使其更清晰

编辑＃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仍在进行控制台记录，但由于return false，警报无法运行。这是JS Fiddle示例。

在评论后更新了答案。

Answer 2

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

（不要忘记创建一个唯一的ID而不是＆＃34;包装＆＃34;）

＆＃34;纸＆＃34;用pointer-events初始化：none;所以它不会发出任何事件。

Answer 3

您可以使用解决方案https://jsfiddle.net/usqmkbg2/

＆＃13;

  @ViewChild(Scrollable) scrollable: Scrollable; 

  ngAfterViewInit() {
     this.scrollable.elementScrolled().subscribe(scrolled => {
         //do stuff
     });
  }

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

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的两个透明覆盖层。

希望这就是你的意思。

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

4 个答案: