Question

我有一个网页，其中两个画布相互叠加：

<style>
canvas {
  position: absolute;
}
</style>
<canvas id="first" width=800 height=600></canvas>
<canvas id="second" width=800 height=600></canvas>

（完整示例here。）

如果我为两幅画布注册mousedown处理程序：

document.getElementById('first').addEventListener('mousedown', function () {
  console.log('first canvas mousedown');
});

document.getElementById('second').addEventListener('mousedown', function () {
  console.log('second canvas mousedown');
});

然后点击它们，然后我只看到second canvas mousedown已记录。这是有道理的，因为它是最重要的。

我希望second画布的事件处理程序在处理事件时有第一个破解但如果它不关心它，让它传递给事件处理程序对于first画布，它位于其下方。

实际上，这些<canvas> es是独立React组件的一部分，因此统一事件处理程序并非易事。

Answer 1

有可能（尽管很乏味）重新创建一个镜像第一个内容的新事件对象，然后调度到另一个元素，例如：

var pass = false;  // toggles on each event

first.addEventListener('mousedown', function(e) {
  output.innerHTML = "first";
});

second.addEventListener('mousedown', function(e) {
  pass = !pass;
  if (pass) {
    var fields = ['screenX', 'screenY', 'clientX', 'clientY',
                  'ctrlKey', 'altKey', 'shiftKey', 'metaKey',
                  'button', 'buttons', 'relatedTarget', 'region'];
    var opts = {};
    fields.forEach(function(f) {
        if (f in e) {
           opts[f] = e[f];
        }
    });
    var copy = new MouseEvent(e.type, opts);
    first.dispatchEvent(copy);
  } else {
    output.innerHTML = "second";
  }
});

您可能还希望复制MouseEvent的超级接口中的其他属性。

演示https://jsfiddle.net/070ckbra/2/

是否有可能通过重叠的画布选择性地传递DOM事件？

1 个答案: