Vimeo iFrame窃取Firefox鼠标滚轮事件

Vimeo iFrame Stealing Mouse Wheel Event on Firefox

本文关键字：事件 鼠标 Firefox iFrame 窃取 Vimeo      更新时间：2023-09-26

我在这里做了这个例子: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 ?

我想在自定义滚动条中使用这个

这基本上是设计。你的代码应该完全不知道用户在IFRAME中做了什么(尤其是来自不同来源的IFRAME，如YouTube——这是web安全架构的一部分，由同源策略强制执行。)

现在，即使在跨源的情况下，如果框架本身不滚动，浏览器也可以选择让滚动影响框架的祖先。这种滚动应该在没有任何事件的情况下发生在顶部文档上-看看Chrome的行为，如果你滚动到这个IFRAME的底部并继续滚动: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的末尾时，主文档将滚动，但在鼠标位于父文档上方之前不会触发任何事件。

看起来这是Firefox的一个bug: 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/

我也面临着同样的问题，但是使用了缩放滚动功能。

由于不可能在没有黑客的情况下捕获mousewheel事件，我认为最好的选择是在iframe上放置一个透明的div并添加&autoplay=1参数在vimeo/youtube网址上点击。

相关文章：