javascript - SVG block 触摸/鼠标滚轮事件

Question

有解决办法吗？我正在运行自己的自定义滚动条脚本，而不是使用内置的浏览器功能。出于多种原因，我更喜欢将 SVG 用于我的图像元素，但是一个非常主要的陷阱是触摸或鼠标滚过 svg 会阻止事件，从而使页面滚动停止。这在 svg 可能占据文档的整个宽度的移动浏览器上更为明显，在这种情况下，一旦您到达 SVG 元素，用户就无法滚动过去。

我没有在 IE 中测试过，但在 Chrome 中，触摸命令在 SVG 上不起作用，而在 Firefox 上，鼠标滚轮事件是个问题。我想这两者都会在 IE 上哈哈。

一个不错的解决方案是以某种方式向我的 SVG 元素添加一个事件，以捕获事件并将它们传递给滚动事件。我似乎找不到办法。一个更好的解决方案是以某种方式将文档放在 SVG 之上，这样 SVG 根本不会干扰滚动。同样，似乎找不到办法。

我将我的 SVG 元素嵌入到对象标签中，出于多种原因这很重要。我假设对象标签实际上是罪魁祸首。

Answer 1

根据 Duopixel 的评论。添加:

object {
    pointer-events: none;
}

到 css 确实解决了 Firefox 和 Chrome 中的问题。我仍然需要在 IE 中进行测试，但目前这似乎是最好和最简单的解决方案。

可以在http://davidwalsh.name/pointer-events 找到一篇解释指针事件属性的好文章。

如果上述问题是 IE 中的问题，您可以使用需要捕获指针位置并将其传递给适当元素的 javascript 解决方案。可以在此处找到使用 jQuery 但可以很容易地转换为 vanilla javascript 的工作版本:http://jsbin.com/uhuto/1/edit