有两个重叠的画布，我可以将鼠标事件传递到底部吗？

Question

我正试图通过fabric.js canvas.mouseenabled=false来绘制一些指南。

到目前为止，我在一个页面中放置了两个相同大小的画布，最上面的一个是静态工作扫描，用于绘制一些引导线，底部画布将包含一些交互式对象。这似乎就是他们在上面链接页面中的表现。

但是，我无法在底部画布上使用这些对象，因为顶部画布会中断鼠标事件。有没有办法让鼠标事件传递到底部画布？我在顶部画布上想到{{1}}这样的东西 - 可能吗？

我想到了另一种解决方案：将引导线和其他对象放在一个画布中。我不喜欢这个解决方案，因为它添加了我不想要的东西到底部画布，在这种情况下，我必须添加一些行实例而不是仅仅通过context2d绘制线，我认为给我低性能

Answer 1

应用css-property pointer-events:none 对于上层元素，鼠标事件可以通过。 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

它适用于现代浏览器。 http://caniuse.com/#feat=pointer-events