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

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

javascript firefox iframe

Javascript Firefox上的Vimeo iFrame窃取鼠标滚轮事件,javascript,firefox,iframe,mouse,mousewheel,Javascript,Firefox,Iframe,Mouse,Mousewheel,我在这里举了一个例子： })（窗口、文件）您可以在Firefox中测试是否触发了scroll事件，除非在vimeo iframe上（我猜是任何iframe） iframe上的火灾事件是否有解决方案 PS-我想在自定义滚动条中使用它，它看起来像是Firefox中的一个bug：所以可能没有一个简单的方法来处理这个问题。但是，由于即使没有调度操作也会产生效果，因此可以使用一种变通方法。它可能不适用于所有情况，但应涵盖许多情况检测滚轮事件，而不是检测滚轮事件，而是检测滚动，并使用开关检测是否单击鼠

我在这里举了一个例子：

})（窗口、文件）

您可以在Firefox中测试是否触发了scroll事件，除非在vimeo iframe上（我猜是任何iframe）

iframe上的火灾事件是否有解决方案

PS-我想在自定义滚动条中使用它，它看起来像是Firefox中的一个bug：

所以可能没有一个简单的方法来处理这个问题。但是，由于即使没有调度操作也会产生效果，因此可以使用一种变通方法。它可能不适用于所有情况，但应涵盖许多情况

检测

滚轮事件

，而不是检测

滚轮事件，而是检测滚动
，并使用开关检测是否单击鼠标。如果窗口滚动而鼠标未被单击，则很可能是通过鼠标滚轮
。其他情况是，如果从脚本触发它，在这种情况下也可以轻松处理
一种情况是，当窗口无法再滚动时，您将无法处理该事件
它看起来是这样的：
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;
}

这基本上是设计的。您的代码应该完全不知道用户在IFRAME中做了什么（特别是来自不同来源（如YouTube）的IFRAME-这是web安全体系结构的一部分，由同源策略强制执行。）
现在，即使在跨原点的情况下，如果帧本身不滚动，浏览器也可以选择让滚动影响帧的祖先。此滚动应在顶部文档上不触发任何事件的情况下进行-如果滚动到此IFRAME底部并保持滚动，请参阅Chrome的行为：
HTML:
您将看到，当您滚动到IFRAME的末尾时，主文档将滚动，但在鼠标位于父文档上方之前，不会触发任何事件。
我也遇到过同样的问题，但具有滚动缩放功能
由于不进行黑客攻击就无法捕获mousewheel事件，因此我认为最好的选择是在iframe上放置一个透明div，并添加&autoplay=1参数
在vimeo/youtube url中单击。很好，但它对我没有帮助-首先，我无法检测到滚轮Delta第二，目的是自定义滚动条，主体溢出被隐藏，因此它实际上不会滚动（因此没有滚动事件）-检查新示例，因此不可能进行黑客攻击？嗯，我想你可以在IFRAME上面放一个透明的DIV，但是你的访问者可能会失去实际播放/暂停视频的能力。此外，如果你在IFRAME上添加“scrolling=no”属性，浏览器将不会单独滚动IFRAME内容。不确定这是否有助于您的用例-当IFRAME悬停时，外部页面将滚动，但在IFRAME消失之前，您不会得到任何事件。是的，指针事件：没有一个在IFRAME上工作得很好，但基本上我们也需要play功能：与此同时，我改变了主意，它是一个bug还是一个特性。。所以我重新开始了
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;
}

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

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