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

【问题标题】：Vimeo iFrame Stealing Mouse Wheel Event on FirefoxFirefox 上的 Vimeo iFrame 窃取鼠标滚轮事件
【发布时间】：2015-07-14 23:09:47
【问题描述】：

我在这里做了这个例子：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 );
}

})(窗口、文档);

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

是否有任何解决方案可以在 iframe 上触发事件？

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

【问题讨论】：

标签： javascript firefox iframe mouse mousewheel

【解决方案1】：

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

现在，即使在跨域情况下，如果框架本身不滚动，浏览器也可以选择让滚动影响框架的祖先。这种滚动应该不会在顶部文档上触发任何事件 - 如果您滚动到此 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 的末尾时，主文档将滚动，但在鼠标位于父文档上方之前不会触发任何事件。

【讨论】：

所以不可能破解？
好吧，我想您可以在 IFRAME 顶部放置一个透明的 DIV - 但您的访问者可能会失去实际播放/暂停视频的能力。
另外，如果您在 IFRAME 上添加“scrolling=no”属性，浏览器将不会单独滚动 IFRAME 内容。不确定这是否有助于您的用例 - 当 IFRAME 悬停时，外部页面将滚动，但在 IFRAME 不碍事之前您不会收到任何事件。
是的，pointer-events:none 在 iframe 上同样有效，但基本上我们也需要播放功能：D
与此同时，我已经改变了它是错误还是功能的想法。所以我重新打开了bugzilla.mozilla.org/show_bug.cgi?id=1084121

【解决方案2】：

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

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

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

您不会处理的一种情况是当窗口无法再滚动时，您将不会收到该事件。

看起来像这样：

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/

【讨论】：

很好，但它对我没有帮助 - 首先，我无法检测到车轮三角洲
第二，目的是自定义滚动条，主体溢出被隐藏，因此它实际上不滚动（因此没有滚动事件）-检查新示例

【解决方案3】：

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

由于无法在没有 hack 的情况下捕获鼠标滚轮事件，我认为最好的选择是在 iframe 上放置一个透明 div 并添加 &autoplay=1 参数在 vimeo/youtube 网址中点击。

【讨论】：