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

Question

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

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

尝试以下控件:

鼠标滚轮:缩放

拖动空白区域:平移

拖动底部区域或 handle :平移/缩放

单击一次，然后再次单击:绘制一个框

拖动框:移动框

拖动框的边缘:调整大小

底层机制是覆盖 Canvas 的 SVG。 Canvas 上有 z-index 0 和 SVG z-index 1 - 随意检查 DOM。在 Chrome/Firefox 上一切正常。

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

玩了一段时间后，我想我看到了病理。我制作了一个页面版本，我允许在 Canvas (图形)区域之外但仍在 SVG 内绘制框。然后我可以执行以下操作(在 IE 中):

在轴区域( Canvas 外)画一个框

将其拖到主要区域(在 Canvas 上)

将鼠标悬停在框上并使用鼠标滚轮 - 现在缩放事件由 SVG 拾取。没有框的鼠标滚轮导致事件进入 Canvas (消失。)

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

解决这个问题的一个明显方法是在整个 SVG 区域上创建一个透明的矩形，但这似乎很愚蠢。另外，也许我做错了什么，在使用 Chrome 时修补了但在 IE 中损坏了。有没有人有什么建议？

注意:一个(已删除的)答案建议将整个 SVG 区域包装在 <g> 中元素和应用 pointer-events: all到它。然而，这并没有奏效。我什至认为这没有必要，因为在整个 SVG 区域中都可以很好地检测到指针事件，除非有 Canvas 的地方。

Answer 1

如果您想阻止对 SVG 中透明区域的点击传递到底层 Canvas，那么我将使用(稍微修改的)“愚蠢”解决方案:在 SVG 内容下方放置一个透明的矩形。就像是:

<svg>
  <rect width="100%" height="100%" pointer-events="all" fill="none"/>
  <!-- … everything else … -->
</svg>

使用 fill=none 和 pointer-events=all，矩形将不可见，但它仍会接收鼠标事件并阻止这些事件通过底层 Canvas。所以，如果你在 SVG 上放置一个点击监听器，SVG 仍然会接收点击而不是 Canvas。 (您也可以将此技术应用于 G 元素，但您可能希望明确定位矩形而不是使用 100% 的宽度和高度。)