Is it possible to selectively pass DOM events through overlapping canvases?

问题

I have a web page with two canvases sitting on top of one another:

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

(Full example here.)

If I register mousedown handlers for both canvases:

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

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

and click on them, then I only see second canvas mousedown logged. This makes sense since it's on top.

I'd like the event handler for the second canvas to have a first crack at handling the event but, if it doesn't care about it, let it pass through to the event handler for the first canvas, which is underneath it.

In reality these <canvas>es are parts of independent React components, so it's not trivial to unify the event handlers.

回答1:

It's possible (albeit tedious) to recreate a new event object that mirrors the contents of the first, and then dispatch to the other element, e.g.:

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";
  }
});

There are other properties from the MouseEvent's super-interfaces that you might want to copy too.

demo at https://jsfiddle.net/070ckbra/2/

来源：https://stackoverflow.com/questions/44143357/is-it-possible-to-selectively-pass-dom-events-through-overlapping-canvases

标签

javascript

reactjs

dom-events