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:

Solution 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/

Share