Question

我正在做一个Firefox插件，通过Youtube或Vimeo的嵌入式iframe视频拦截滚轮鼠标事件。我让它在正常的YT / vimeo页面上工作（将监听器附加到窗口，然后查看event.target以识别视频），问题在于＆lt;的iframe＆GT; tag：它没有拦截＆＃34; wheel＆＃34;事件（例如＆＃34;鼠标悬停＆＃34;有效）。

即。页面中有类似的HTML代码：

<iframe src="//player.vimeo.com/video/89055435/fallback?noscript" frameborder="0"></iframe>

这有效：

iframes[i].addEventListener("mouseover", func, false);

＆＃34; wheel＆＃34;我做了类似的事情：

iframes[i].addEventListener("wheel", myFunc, false);
or
iframes[i].contentWindow.addEventListener("wheel", myFunc, false);

没有结果。我也尝试过捕捉而不是冒泡：没什么。

我也尝试了这个：

window.addEventListener("wheel", myFunc, false);

这适用于页面的每个对象，但iframe本身没有任何内容。我还使用侦听器创建了一个setTimeout，以查看iframe是否未完全加载：没有任何更改。

http://jsfiddle.net/chtNP/121/

那么，如果我在iframe上面有一个视频，或者如何从窗口获取所有轮子（包括iframe上的轮子），我应该怎么做轮子事件呢？

Answer 1

我有同样的问题，这是我的解决方案：

var iframe = document.querySelector('iframe');

iframe.contentDocument.addEventListener('wheel', event => 
    iframe.dispatchEvent(new WheelEvent('wheel', event))
);

这会将iframes文档中的每个wheel - 事件转发给父文档中的iframe元素。

注意：

无法“重复”该事件，需要克隆
WheelEvent构造函数复制许多但不是所有原始event属性
克隆事件不是isTrusted
事件转发已附加到iframe 文档。只有文档不变，它才会起作用。因此，一旦加载了最终文档，您应该运行上面的代码
访问iframes文档可能会让您遇到跨域问题

vimeo / YouTube iframe视频轮事件

1 个答案: