是否可以通过重叠的画布有选择地传递DOM事件？ [英] Is it possible to selectively pass DOM events through overlapping canvases?

问题描述

我有一个网页，上面有两个画布，彼此叠放：

 < style> 
 canvas {
位置：绝对； 
} 
< / style> 
< canvas id = first width = 800 height = 600>< / canvas> 
< canvas id = second width = 800 height = 600>< / canvas> 
  

（完整示例这里。）

如果我注册了鼠标按下这两个画布的处理程序：

  document.getElementById（'first'）。addEventListener（'mousedown'，function （）{
 console.log（'first canvas mousedown'）; 
}）; 
 
 document.getElementById（'second'）。addEventListener（'mousedown'，function（）{
 console.log（'second canvas mousedown'）; 
}）; 
  

并单击它们，然后我只看到第二个画布鼠标按下已记录。

我希望 second 画布的事件处理程序具有一个首先处理事件，但是，如果不关心它，则将其传递到事件处理程序，以使其位于 first 画布下面。 p>

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

解决方案

有可能（尽管很乏味）重新创建一个新的事件对象，该对象反映第一个对象的内容，然后分派给另一个元素，例如：

  var pass = false; //开启每个事件
 
 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/

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.

解决方案

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/

这篇关于是否可以通过重叠的画布有选择地传递DOM事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！