Question

我尝试使用画布添加叠加层。它需要禁用点击，因此叠加层上方的所有元素都应该是不可点击的，除了我发送给openOverlay函数的元素。

此外，还有一个我想让它可点击的按钮。此按钮被发送到openOverlay函数。

我该怎么做？

这是我的代码：

https://codepen.io/anon/pen/QQqQae 按钮需要是可点击的，但不是div

我尝试了类似：ctx.clearRect的内容，以便剪切按钮上方的部分：

function openOverlay(elem) {
  var loc = elem.getBoundingClientRect();
  var canvas = document.createElement("canvas");
  canvas.className = "highlight";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2);
  document.body.appendChild(canvas);
  window.overlayCanvas = canvas;
}

Answer 1

为＆＃34;画布＆＃34;设置z-index;到-1：

canvas{
  z-index: -1;
}

但是，上面的方法会使画布中的所有元素都可以点击。

因此，您可以在按钮上设置以下样式以使其可单击：

button{
  position: absolute; //or, relative
  left: 0px;
  top: 0px;
  z-index: 2;
}

画布中的所有其他元素都不会被点击，除非它们的位置绝对（或相对）和更高的z-index。

Answer 2

首先，ctx.clearRect对鼠标点击事件没有任何影响。将来，您可以使用画布匹配区域，但它们现在支持有限。见MDN AddHitRegion

但是现在，您可以将任何应该可点击的按钮放在比叠加层更高的z-index上，并给它相对或绝对定位。

＆＃13;

function openOverlay(elem) {

  var canvas = document.createElement("canvas");
  canvas.className = "highlight";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvas.zIndex = 100;
  var ctx = canvas.getContext("2d");
  ctx.fillRect(4, 4, 300, 150);
  elem.classList.add("clickable");
  document.body.appendChild(canvas);
  window.overlayCanvas = canvas;
}
var element= document.getElementById("button1")
openOverlay(element)

＆＃13;

body{
  background-color: grey;
}

.clickable{
  position: relative;
  z-index:200;
}
canvas{
  z-index: 100;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  background-color:blue;  
  opacity: 0.6;
}

＆＃13;

<button id="button1" onclick="window.alert('Clicked button1')">Click Me</button>
<button id="button2" onclick="window.alert('Clicked button 2')">Don't Click Me</button>

＆＃13;

画布：添加叠加除了应该可点击的按钮

2 个答案: