4

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

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

尝试以下控件：

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

底层机制是一个覆盖在画布上的 SVG。画布有z-index0 和 SVG z-index1 - 随意检查 DOM。在 Chrome/Firefox 上一切正常。

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

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

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

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

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

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

4

1 回答 1

4

如果您想防止对 SVG 中透明区域的点击进入底层 Canvas，那么我将使用（稍作修改）“愚蠢”解决方案：在 SVG 内容下方放置一个透明矩形。就像是：

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

With fill=none and pointer-events=all, the rect won't be visible, but it will still receive mouse events and prevent those from going through to the underlying Canvas. So, if you put a click listener on the SVG, the SVG would still receive the clicks rather than the Canvas. (You can apply this technique to a G element as well, though you'll probably want to position the rect explicitly rather than using 100% width and height.)

于 2012-10-15T05:06:36.137 回答