Firefox 中的 SVG 对象未触发滚动事件答案

【问题标题】：Scroll event not being triggered over SVG object in FirefoxFirefox 中的 SVG 对象未触发滚动事件
【发布时间】：2015-11-14 08:10:27
【问题描述】：

我注意到滚动事件（不确定其他事件）在像这样滚动到 object 元素时没有被传播：

<object id="svg_object" data="https://cdn.css-tricks.com/wp-content/uploads/2015/05/kiwi.svg" type="image/svg+xml"></object>

Reproduction of the issue in Firefox

滚动到红色背景上，您将看到消息是如何在 java-script 控制台中显示的。滚动 SVG（或黄色背景）不会做任何事情。

这是我正在使用的代码：

addMouse();

function MouseWheelHandler() {
    console.log("Getting the event");
}

function addMouse() {
    if (document.addEventListener) {
        document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
        document.addEventListener('DOMMouseScroll', MouseWheelHandler, false); //Old Firefox
    } else {
        document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
    }
}

【问题讨论】：

标签： javascript jquery firefox svg mozilla

【解决方案1】：

您需要使 SVG 内容指针事件：无，即

#svg_object {

    background:yellow;
    pointer-events: none;
}

否则 SVG 文档会获取所有指针事件而不是 html 容器。

【讨论】：