Javascript 另一个元素后面画布上的事件侦听器

我的画布上有一个鼠标移动事件侦听器。但在我的画布上是一个具有更高z索引的div，它包含一些菜单按钮

我面临的问题是，我希望鼠标在菜单元素上时，鼠标移动事件仍然激活，而菜单元素在画布元素上

目前，它的行为就像鼠标不再位于画布顶部一样，因为由于z索引顺序，菜单元素具有优先权

有没有办法让这个事件监听器忽略任何阻碍它的元素

我的代码：

var canvas = new function(){
      var self = this

      self.outputMouseData = function(evt,el){

        var pos = mouse.relativePosition(evt,el);

        el.ctx.clearRect(0,0,el.width,el.height);

        el.ctx.fillStyle    = "white";
        el.ctx.font         = "bold 16px Arial";
        el.ctx.fillText(pos.x+' | '+pos.y, el.width-150,el.height-10);  

      }
}

   elements.addEvent(foreground,'mousemove',
                     function(evt){ canvas.outputMouseData(evt,foreground); }
                     );

我的HTML

<div class="parent"> 
   <canvas id="canvas"></canvas>
   <div class="menu">Menu output</div>
</div>

菜单输出

---

父项是相对定位的。画布和菜单是绝对定位的，但菜单是在画布上的z索引。

HTML事件在节点树上冒泡（您可以阅读关于这一点的很好的解释）

这意味着，如果将事件处理程序附加到包含其他元素的元素，则即使事件发生在子元素上（假定冒泡未显式中止），也会调用该处理程序。您可以将canvas&div包装在包装器元素（例如span）中，并将处理程序附加到该元素上。无论z索引如何，您都将获得事件

下面是一个简短的代码示例（getOffsetSum的取值）：

var canvas=document.getElementById（'canvas'）；
var canvasPos=getOffsetSum（canvas）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“rgb（200,0,0）”；
ctx.fillRect（0,0,99,99）；
var container=document.getElementById（'container'）；
var mousemove=document.getElementById（'mousemove'）；
container.addEventListener（'mousemove'，函数（evt）{
var pos=getOffsetSum（evt.target）；
pos.top+=evt.offsetY-canvasPos.top；
位置左+=evt.offsetX-画布位置左；
mousemove.innerHTML='offsetX:'+evt.offsetX+'| offsetY:'+evt.offsetY+'
+
‘画布：’+pos.left+’|画布：’+pos.top；
});
函数getOffsetSum（elem）{
var top=0，left=0；
while（elem）{
top=top+parseInt（元素偏移）；
left=left+parseInt（elem.offsetLeft）；
elem=elem.offsetParent；
}
返回{
顶:顶,，
左：左
}
}

.ontop{
位置：绝对位置；
顶部：20px；
左：20px；
}

最上面

HTML事件正在节点树上冒泡（您可以阅读一个很好的解释）

这意味着，如果将事件处理程序附加到包含其他元素的元素，则即使事件发生在子元素上（假定冒泡未显式中止），也会调用该处理程序。您可以将canvas&div包装在包装器元素（例如span）中，并将处理程序附加到该元素上。无论z索引如何，您都将获得事件

下面是一个简短的代码示例（getOffsetSum的取值）：

var canvas=document.getElementById（'canvas'）；
var canvasPos=getOffsetSum（canvas）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“rgb（200,0,0）”；
ctx.fillRect（0,0,99,99）；
var container=document.getElementById（'container'）；
var mousemove=document.getElementById（'mousemove'）；
container.addEventListener（'mousemove'，函数（evt）{
var pos=getOffsetSum（evt.target）；
pos.top+=evt.offsetY-canvasPos.top；
位置左+=evt.offsetX-画布位置左；
mousemove.innerHTML='offsetX:'+evt.offsetX+'| offsetY:'+evt.offsetY+'
+
‘画布：’+pos.left+’|画布：’+pos.top；
});
函数getOffsetSum（elem）{
var top=0，left=0；
while（elem）{
top=top+parseInt（元素偏移）；
left=left+parseInt（elem.offsetLeft）；
elem=elem.offsetParent；
}
返回{
顶:顶,，
左：左
}
}

.ontop{
位置：绝对位置；
顶部：20px；
左：20px；
}

最上面

将画布和菜单div放入容器div中

然后使用jQuery事件委派来侦听容器上的mousemove事件，但让画布响应这些mousemove事件

$('#container').on('mousemove','#myCanvas',function(){ doSomething(); }

---

您可以在此处了解有关事件委派的更多信息：

将画布和菜单div放入容器div中

然后使用jQuery事件委派来侦听容器上的mousemove事件，但让画布响应这些mousemove事件

$('#container').on('mousemove','#myCanvas',function(){ doSomething(); }

---

您可以在此处了解有关事件委派的更多信息：

我最初的想法是将“mousemove”事件添加到文档本身（而不是画布元素），并使用evt.currTarget或evt.target跟踪元素。通过这种方式，无论您将鼠标悬停在菜单或画布上（或任何地方），mousemove evt都将始终存在。

我最初的想法是将“mousemove”事件添加到文档本身（而不是画布元素），并使用evt.currTarget或evt.target跟踪元素。通过这种方式，无论您将鼠标悬停在菜单或画布上（或任何地方），mousemove evt都将始终存在。

您不必像其他答案中建议的那样使用包装器，只需应用

指针事件：无

到菜单div。这将允许画布发出

mousemove

事件

菜单{
指针事件：无；
}

无需像其他答案中建议的那样使用包装器，您只需应用

指针事件：无

到菜单div。这将允许画布发出

mousemove

事件

菜单{
指针事件：无；
}

但即使我不在画布上移动鼠标，这也会激活事件。没错，我认为这是您所期望的，对吗？当您在画布上或在菜单元素上时，您将始终获得mousemove evt。仅当mouse event.target是画布或菜单元素时，才需要调用方法。否则，您可以添加一个覆盖菜单和画布的父div，并为父div添加mousemove事件