在Firefox中没有通过SVG对象触发滚动事件

时间:2015-08-20 15:31:17

标签: javascript jquery firefox svg mozilla

我注意到滚动object这样的<object id="svg_object" data="https://cdn.css-tricks.com/wp-content/uploads/2015/05/kiwi.svg" type="image/svg+xml"></object> 元素时,不会传播滚动事件(不确定其他事件):

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
    }
}

Reproduction of the issue in Firefox

滚动红色背景,您将看到如何在java脚本控制台中显示消息。 滚动SVG(或黄色背景)不会做任何事情。

以下是我使用的代码:

memo = [0,1]
def fib(n):
    if len(memo) <= n:
        memo.append(fib(n-2) + fib(n-1))
    return memo[n]
print fib(1)

1 个答案:

答案 0 :(得分:1)

你需要制作SVG内容指针 - 事件:无,即

#svg_object {

    background:yellow;
    pointer-events: none;
}

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