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

Posted 2023-03-05

【中文标题】SVG 阻止触摸/鼠标滚轮事件

【英文标题】：SVG Blocks Touch/Mousewheel events

【发布时间】：2013-05-04 13:59:49

【问题描述】：

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

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

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

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

【问题讨论】：

这是一种奇怪的行为，SVG 中是否嵌入了任何 javascript？将object pointer-events: none; 添加到您的 CSS 中应该可以解决 Firefox 和 Chrome（但不是 IE）中的问题。

【参考方案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

【讨论】：

加一个用于发布一个好问题并发布一个更好的答案。