正在删除指针事件: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>

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上单击。但当我右键单击时，指针事件保持为"none"值。

我可以做些什么来轻松地删除指针事件属性，并在点击被触发之前进行删除(就像我在编辑指针事件之前点击要点击的代码中所做的那样？)

EDIT：添加Z索引，使其更清晰

编辑#2

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

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

Answer 1

这里有一个解决方案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 2

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

(别忘了制作一个唯一的id而不是"包装器")

"纸张"是用指针事件初始化的：none；所以它不会发出任何事件。

Answer 3

试试这个：

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的transparent覆盖。

希望这就是你的意思。

Answer 4

根据您计划如何使用它，您可以尝试将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示例。

回答以下更新的意见。