如何让页面的上层元素把用户操作事件转移给自己身下被遮挡住的元素

Question

需求是这样，下面有一个Canvas，id叫“cav”，里面有各种动画，在Canvas的上面覆盖了另外一个Canvas，id叫“debug”，看起来是这样的<div>
    <canvas id="cav"  width="400" heigh="200" z-index="1" style="position:absolute; left:5px; top:5px;"/>
    <canvas id="debug" width="400" heigh="200" z-index="1"  style="position:absolute; left:5px; top:5px;"/>
</div>那个debug的canvas主要任务是显示一些半透明的debug信息，而现在由于他覆盖在cav这个canvas之上，导致我无法跟cav进行鼠标操作。我之前的解决方案是让debug canvas监听事件：
debugCanvas.addEventListener('mousedown',function(e){cavCanvas.dispatchEvent(e);},true);这种方式在Chrome上是有效的，debugCanvas会吧用户操作转移给cavCanvas，但是在Firefox上则会报错：
uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)"要怎么搞啊，或者有没有什么其他的取巧方案？

Answer 1

按你的代码需求，你完全可以自己再模拟一个dispachEvent.function cavEvent(e){
  /*事件处理代码*/
}debugCanvas.addEventListener('mousedown',function(e){cavEvent(e);},true);

Answer 2

function cavEvent(e){
  /*事件处理代码*/
}
我就是不知道这个该怎么写

Answer 3

这和你的dispatchEvent没区别啊，e还是debug传进来的e， 你要什么功能就写什么了呀。