SVG块的触摸/鼠标滚轮事件

Question

有没有解决方法？我正在运行自己的自定义滚动条脚本，而不是使用内置的浏览器功能。我喜欢使用SVG作为我的图像元素，有许多原因，但其中一个很大的缺点是，触摸或鼠标滚轮在SVG上会阻止事件，从而使页面滚动停止。在移动浏览器上更加明显，因为SVG可能占据整个文档的宽度，在这种情况下，一旦到达SVG元素，用户就无法向下滚动。

我还没有在IE中进行测试，但在Chrome中，触摸命令在SVG上不起作用，在Firefox中，鼠标滚轮事件是一个问题。我想IE也会有这个问题哈哈。

一个不错的解决方案是以某种方式添加一个事件到我的SVG元素中，捕获事件并将其传递给滚动事件。我似乎找不到方法。甚至更好的解决方案是以某种方式将文档放在SVG上面，这样SVG就完全不会干扰滚动。同样，我找不到方法。

我使用对象标记嵌入我的SVG元素，这对于各种原因非常重要。我认为对象标记实际上是罪魁祸首。

- ryandlf

---

这是一种奇怪的行为，SVG 中是否嵌入了任何 JavaScript？在 CSS 中添加 object {pointer-events: none;} 应该可以解决 Firefox 和 Chrome 中的问题（但不适用于 IE）。 - methodofaction

Answer 1

根据Duopixel的评论，我们补充如下：

object {
    pointer-events: none;
}

对于Firefox和Chrome，CSS确实解决了这个问题。我还需要在IE中进行测试，但目前看来这似乎是最好、最简单的解决方案。

有一篇很好的文章介绍了指针事件属性，请访问http://davidwalsh.name/pointer-events

如果上述问题在IE中存在问题，您可以使用JavaScript解决方案，需要捕获指针位置并将其传递给正确的元素。一个可运行的版本使用jQuery，但可以很容易地转换为原生JavaScript，可以在这里找到：http://jsbin.com/uhuto/1/edit

- ryandlf

---

为了发表一个好问题和发布更好的答案，加一分。 - Alain Pannetier