SVG Blocks Touch/Mousewheel events

有没有解决方法？我正在运行自己的自定义滚动条脚本，而不是使用内置的浏览器功能。出于多种原因，我更喜欢使用SVG来处理图像元素，但其中一个很重要的缺陷是触摸或鼠标滑过svg会阻止该事件，从而导致页面滚动停止。这在移动浏览器上更为明显，其中svg可能占据文档的整个宽度，在这种情况下，只要到达SVG元素，用户就无法滚动浏览它。SVG Blocks Touch/Mousewheel events

我没有在IE中测试过，但在Chrome中，触摸命令不工作在SVG之上，在Firefox上，mousewheel事件是一个问题。我认为这将是在IE浏览器哈哈。

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

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

来源

2013-05-09 ryandlf

这是一个奇怪的行为，SVGs有任何JavaScript嵌入在他们？向你的CSS添加'object {pointer-events：none;}'应该解决Firefox和Chrome（但不是IE）的问题。 – Duopixel 2013-05-10 17:04:14

Per Duopixel的评论。增加：

object { 
    pointer-events: none; 
}

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

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

发现如果上述问题是在IE中的一个问题，你可以使用JavaScript的解决方案，需要捕捉指针的位置，并传递适当的元素。一个使用jQuery的工作版本，但可以很容易地被翻译成香草javascript可以在这里找到：http://jsbin.com/uhuto/1/edit

来源

2013-05-14 02:45:24 ryandlf

SVG Blocks Touch/Mousewheel events

回答

相关问题