Firefox 上的 Vimeo iFrame 窃取鼠标滚轮事件

Question

我在这里做了这个例子：http://jsbin.com/pokahec/edit?html,output

// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {

var prefix = "", _addEventListener, onwheel, support;

// detect event model
if ( window.addEventListener ) {
    _addEventListener = "addEventListener";
} else {
    _addEventListener = "attachEvent";
    prefix = "on";
}

// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
          "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox

window.addWheelListener = function( elem, callback, useCapture ) {
    _addWheelListener( elem, support, callback, useCapture );

    // handle MozMousePixelScroll in older Firefox
    if( support == "DOMMouseScroll" ) {
        _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
    }
};

function _addWheelListener( elem, eventName, callback, useCapture ) {
    elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
        !originalEvent && ( originalEvent = window.event );

        // create a normalized event object
        var event = {
            // keep a ref to the original event object
            originalEvent: originalEvent,
            target: originalEvent.target || originalEvent.srcElement,
            type: "wheel",
            deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
            deltaX: 0,
            deltaZ: 0,
            preventDefault: function() {
                originalEvent.preventDefault ?
                    originalEvent.preventDefault() :
                    originalEvent.returnValue = false;
            }
        };

        // calculate deltaY (and deltaX) according to the event
        if ( support == "mousewheel" ) {
            event.deltaY = - 1/40 * originalEvent.wheelDelta;
            // Webkit also support wheelDeltaX
            originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
        } else {
            event.deltaY = originalEvent.detail;
        }

        // it's time to fire the callback
        return callback( event );

    }, useCapture || false );
}

})(window,文档);

您可以在 Firefox 中测试是否触发滚动事件，除非超过 vimeo iframe（我猜是任何 iFrame）

是否有解决 iframe 事件的方法？

PS - 我想在自定义滚动条中使用它

Answer 1

这似乎是 Firefox 中的一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1084121

所以可能没有直接的方法来处理这个问题。但由于该操作即使没有被分派也会产生影响，因此可以使用一种变通方法。它可能不适用于所有情况，但它应该涵盖许多情况。

您检测 scroll 而不是检测 wheel event，并使用开关检测鼠标是否被单击。如果 window 滚动并且没有点击鼠标，那么它很可能来自 mousewheel。其他情况是如果您从脚本触发它，在这种情况下也可以轻松处理。

您不会处理的一种情况是 window 无法再滚动，那么您将不会收到该事件。

看起来像这样：

var mouseDown = false;

function handle_wheel() {
    if (!mouseDown) {
        document.getElementById("debug-textarea").value = document.getElementById("debug-textarea").value + ' wheel';
    } else {
        document.getElementById("debug-textarea").value = document.getElementById("debug-textarea").value + ' scroll';
    }
}

window.onscroll = handle_wheel;
window.onmousedown = function () {
    mouseDown = true;
}
window.onmouseup = function () {
    mouseDown = false;
}

http://jsfiddle.net/wu9y6yua/4/

Answer 2

这基本上是设计使然。您的代码应该完全不知道用户在 IFRAME 中做了什么（尤其是来自不同来源的 IFRAME，如 YouTube - 这是网络安全架构的一部分，由同源策略强制执行。）

现在，即使在跨源情况下，如果框架本身不滚动，浏览器也可以选择让滚动影响框架的祖先。这种滚动应该在顶部文档没有触发任何事件的情况下发生 - 如果您滚动到此 IFRAME 的底部并继续滚动，请参阅 Chrome 的行为： http://jsfiddle.net/8cj0dofx/1/ HTML:

<iframe src="data:text/html,<body style='background:grey;height:550px'>Hello" seamless></iframe>
<div style="height:100px">Hello</div>

JS:

document.addEventListener('DOMMouseScroll', function(e){
    document.getElementsByTagName('div')[0].firstChild.data += ' ' + e.type
});

document.addEventListener('mousewheel', function(e){
    document.getElementsByTagName('div')[0].firstChild.data += ' ' + e.type
});

您会看到，当您滚动到 IFRAME 的末尾时，主文档将滚动，但在鼠标位于父文档上方之前不会触发任何事件。

Answer 3

我遇到了同样的问题，但有缩放滚动功能。

由于不使用 hack 是不可能捕获鼠标滚轮事件的，我认为最好的选择是在 iframe 上放置一个透明 div 并添加 &autoplay=1 参数在 vimeo/youtube url 上单击。

Firefox 上的 Vimeo iFrame 窃取鼠标滚轮事件

Vimeo iFrame Stealing Mouse Wheel Event on Firefox

javascript

firefox

iframe

mouse

mousewheel