SVG阻止触摸/鼠标滚轮事件

Question

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

我没有在IE中测试,但在Chrome中,触摸命令不能在SVG之上工作,而在Firefox上,鼠标滚轮事件是一个问题.我猜它会在IE上都哈哈.

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

我使用对象标签嵌入了我的SVG元素,这很重要,原因有很多.我假设对象标签实际上是罪魁祸首.

Answer 1

Per 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