使用JavaScript追溯性地将事件视为'；指针事件：无'；

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

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属性

指针事件：无，这将导致单击事件传递到下一层

有没有办法做到这一点？
如果您有一个画布元素数组，只需单击当前画布下方的画布即可。像这样：

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

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 i=0；i
您可以隐藏当前画布，然后调用get
document.elementFromPoint
以获取坐标下的画布。是的，这就成功了！如果你想加上这个作为答案，我会同意的。特别是，您可以通过设置样式
pointerEvent='none'
然后在分派新的单击事件后重新启用来禁用。