我注意到滚动事件(不确定其他事件)在滚动 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 脚本控制台中的。 滚动 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
}
}
最佳答案
您需要制作 SVG 内容指针事件:无,即
#svg_object {
background:yellow;
pointer-events: none;
}
否则 SVG 文档获取所有指针事件而不是 html 容器。
关于javascript - Firefox 中的 SVG 对象未触发滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32122396/