javascript - 是否可以通过重叠 Canvas 选择性地传递 DOM 事件？

Question

我有一个网页，其中两个 Canvas 相互叠放:

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

(完整示例 here 。)

如果我注册mousedown两个 Canvas 的处理程序:

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 的事件处理程序canvas 可以首先处理该事件，但是，如果它不关心它，则让它传递到 first 的事件处理程序。 Canvas ，位于其下方。

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

Answer 1

可以(尽管很乏味)重新创建一个反射(reflect)第一个元素内容的新事件对象，然后分派(dispatch)到另一个元素，例如:

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 super 接口(interface)中的其他属性。

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