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

时间:2013-05-09 23:30:58

标签: javascript html svg

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

我没有在IE中测试,但在Chrome中,触摸命令不能在SVG之上工作,而在Firefox上,鼠标滚轮事件是一个问题。我认为这将是IE浏览器哈哈。

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

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

1 个答案:

答案 0 :(得分:6)

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