SVG阻止触摸/滚轮事件 [英] SVG Blocks Touch/Mousewheel events

问题描述

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

我没有在IE中测试过，但在Chrome中，触摸命令不能在SVG上运行，而在Firefox上，mousewheel事件是一个问题。我认为它会在IE浏览器哈哈。

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

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

解决方案

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

Is there a workaround? I am running my own custom scrollbar script as opposed to using the built in browsers functionality. I prefer to use SVG for my image elements for a number of reasons, but one, pretty major pitfall is the fact that touching or mousewheeling over an svg blocks the event and thus brings the page scrolling to a halt. This is even more noticeable on mobile browsers where the svg might take up the entire width of the document in which case as soon as you get to an SVG element, the user is unable to scroll past it.

I haven't tested in IE, but in Chrome, the touch commands dont work on top of SVG, and on Firefox, the mousewheel events are a problem. I assume it will be both on IE haha.

A decent solution would be to somehow add an event to my SVG elements the catches the events and passes them onto the scrolling events. I can't seem to find a way. An even better solution would be to somehow place the document above the SVG so the SVG doesn't interfere with the scrolling at all. Again, can't seem to find a way.

I embed my SVG elements with object tags, which is important for a variety of reasons. I'm assuming the object tag is actually the culprit.

解决方案

Per Duopixel's comment. Adding:

object {
    pointer-events: none;
}

To the css does solve the problem in both Firefox and Chrome. I still have to test in IE, but for now this seems the best and easiest solution.

A good article that explains the pointer events attribute can be found at http://davidwalsh.name/pointer-events

If the issues mentioned above are an issue in IE, you can use a javascript solution that requires capturing the position of the pointer and passing it to the proper element. A working version that uses jQuery but could very easily be translated into vanilla javascript can be found here: http://jsbin.com/uhuto/1/edit

这篇关于SVG阻止触摸/滚轮事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！