JavaScript事件处理和z-index

6uxekuva 于 2023-03-28 发布在 Java

关注(0)|答案(3)|浏览(174)

我目前有三个画布分层在对方的z索引。

<canvas width="800" height="600" id="test3_canvas" style="position: absolute; left: 0; top: 0; z-index:2"></canvas>

<canvas width = "800" height="600" id="test2_canvas" style="position: absolute; left: 0; top: 0;z-index:1"></canvas>

<canvas width="800" height="600" id="test1_canvas" style="position: absolute; left:0; top: 0;z-index:0"></canvas>

但是只有顶层canvas（z-index：2）似乎捕捉到了我设置的mousedown/mouseup/mousemove事件。有没有办法确保其他层也捕捉到这些事件？

JavaScript

来源：https://stackoverflow.com/questions/4697129/javascript-event-handling-and-z-index

3条答案

按热度按时间

mf98qq941#

尽管这个设置看起来很奇怪，但我认为你可以把处理程序放在canvases外部的div上，然后让那个事件调用你需要的每一个canvas。

赞(0）回复(0）举报 2023-03-28

vxf3dgd42#

不，没有办法做到这一点。一般来说，鼠标事件模型是最顶层“捕获”鼠标交互，而在文档呈现过程中，该元素下面的元素根本不会获得任何事件。对于普通的HTML标记，通常可以安排页面设计，使元素的“堆栈”在标记中按词法嵌套，在这种情况下，浏览器将通过元素祖先冒泡事件。但是，对于canvas元素，您实际上不能这样做。