使用 JavaScript 追溯处理事件，就好像它是'pointer-event: none'

Question

我使用绝对定位将多个画布元素分层在一起。每个画布中都有一些透明空间。当我单击此画布堆栈时，我获取发生单击事件的像素值，并确定该像素是否透明，如下所示：

var context = this.element.getContext('2d');
var rect = this.element.getBoundingClientRect();
var x = Math.round(event.clientX - rect.left);
var y = Math.round(event.clientY - rect.top);
var pixelData = context.getImageData(x, y, 1, 1).data;
if (pixelData[3] === 0) {
  console.log('Transparent!')
}

当像素是透明的时，我想把这个层当作具有css属性pointer-event: none;，这将导致点击事件传递到下一层。

有没有办法做到这一点？

Answer 1

如果您有画布元素的数组，则只需单击当前画布下方的画布即可。这样：

var canvasElements = new Array();
canvasElements[0] = canvas.element.getContext('2d');
canvasElements[1] = canvas2.element.getContext('2d');
canvasElements[2] = canvas3.element.getContext('2d');

然后，当您运行测试时：

 var context = this.element.getContext('2d');
 var rect = this.element.getBoundingClientRect();
 var x = Math.round(event.clientX - rect.left);
 var y = Math.round(event.clientY - rect.top);
 for(var i = 0; i < canvasElements.length; i++){
    var pixelData = canvasElements[1].getImageData(x, y, 1, 1).data;
    if (pixelData[3] === 0) {
      console.log('Transparent!');
    } else {
      break;
      //clicked canvas i
    }
 }