IE9检测到与Chrome / Firefox不同的z-index事件-如何解决？

Question

我正在构建一个几乎所有客户端Javascript的交互式可视化应用程序，请参见此处：

http://korhal.andrewmao.net:9294/#/classify/APH10154043

尝试以下控件：

• 鼠标滚轮：缩放
• 拖动空白区域：平移
• 拖动底部区域或手柄：平移/缩放
• 单击一次，然后再次单击：画一个框
• 拖动框：移动框
• 拖动框的边缘：调整大小

底层机制是覆盖画布的SVG。画布具有z-index 0和SVGz-index1-随时检查DOM。在Chrome / Firefox上，一切正常。

问题是，在IE9中，即使Z-index较低，画布似乎也通过SVG接收了点击事件。您可以知道，因为鼠标滚轮/单击/拖动动作在主图表区域中不起作用，但它们在边缘区域中起作用，因为SVG比画布稍大，并且可以在此处拾取事件。例如，尝试在轴区域或底部滚轮。

[在玩了更多之后，我想我看到了病理。我制作了该页面的一个版本，允许在画布（图形）区域之外但仍在SVG内部绘制框。然后，我可以在IE中执行以下操作：

1. 在轴区域（画布外部）绘制一个框
2. 将其拖动到主要区域（在画布上）
3. 将鼠标悬停在框上并使用鼠标滚轮-现在，缩放事件已由SVG拾取。没有框的鼠标滚轮导致事件进入画布（消失。）

所以看来发生的事情是，SVG仅在鼠标下面有一个显式SVG对象时才拾取鼠标事件，否则它会传递到画布，并且仅在Internet Explorer中传递。

解决此问题的一种显而易见的方法是在整个SVG区域上制作透明的rect，但这似乎很愚蠢。另外，也许我做错了一些事情，该问题在使用Chrome浏览器时得到了修补，但在IE中已损坏。有人有建议吗？

注：一个（已删除）答案建议将整个SVG区域包装在<g>元素中并对其应用pointer-events: all。但是，那没有用。我什至认为这不是必需的，因为在除了画布的地方，整个SVG区域都可以很好地检测到指针事件。

Answer 1

[如果要防止在SVG中的透明区域上单击单击传递到基础画布，那么我将使用（稍作修改）“愚蠢”的解决方案：将透明rect放置在SVG内容下面。类似于：