防止鼠标滚轮事件被 Firefox 中的 Flash 处理

Prevent mouse wheel events from being processed by Flash in Firefox

本文关键字：Firefox 中的 Flash 处理 事件 鼠标      更新时间：2023-09-26

我目前正在开发一个具有一些旧版Flash页面的应用程序。我们最近在标题中添加了一个下拉列表，该下拉列表将打开为可滚动的div。标题和下拉列表是 HTML。

这是一个线框来说明设置。

https://wireframe.cc/27ahkk

我们遇到了一个问题，即在下拉列表中悬停时使用滚轮的行为不符合预期。

  • 下拉列表不滚动
  • 改为滚动 Flash 内容

我预计这是因为，作为Flash处理滚轮/鼠标滚轮事件的一部分，它可以防止冒泡并防止默认操作。我在Chrome中做了一些初步测试，发现我附加到气泡阶段的任何事件侦听器实际上都没有被调用。

我的解决方案是在捕获阶段将滚轮/鼠标滚轮事件侦听器附加到窗口。在该处理程序中，如果鼠标悬停在我们的下拉列表中，我会调用event.stopPropagation()以防止事件到达 Flash（从而允许发生默认操作）。大约：

window.addEventListener("wheel", function (event) { 
    if ($('.dropdown-selector:hover').length != 0) {
        event.stopPropagation();
    }
}, true);

下拉列表关闭时，将删除此事件。

这在 Chrome 中运行良好，只要您回退到已弃用的"鼠标滚轮"事件而不是使用更现代的"滚轮"事件，它就可以在 IE 中工作。然而，Firefox是一个不同的故事。

虽然Firefox支持"wheel"事件，但似乎事件从浏览器发送到Flash的方式完全不同。

如果将鼠标悬停在下拉菜单上并使用鼠标滚轮滚动：

  1. 处理程序将触发
  2. if条件正确检测悬停
  3. event.stopPropagation()被称为
  4. 但是，Flash内容仍然滚动
  5. 下拉div 不滚动

更奇怪的是，如果您没有将鼠标悬停在下拉菜单上并用鼠标滚轮滚动：

  1. 处理程序从不触发
  2. Flash 内容滚动
这与在Chrome和IE

中观察到的行为不同，在Chrome和IE中，将鼠标悬停在Flash上时滚动仍会触发处理程序，但由于鼠标不在下拉列表上，因此永远不会调用event.stopPropagation()，因此它会捕获到Flash，在那里将处理事件。

这让我感到困惑，因为我在捕获阶段将侦听器附加到window，因此我应该在页面上的任何其他内容之前接收事件。但是在Firefox中，似乎Flash甚至在window之前就获得了事件，或者Flash完全接收了不同的事件（即使JavaScript在调试器中的断点处停止，Flash似乎也会收到这些事件）。

是否有人有使用Flash和Firefox的经验，并且对浏览器如何将事件发送到嵌入式Flash内容有更好的了解？为什么我的策略在所有其他浏览器中都有效，但在 Firefox 中却不尽如人意？在我们尝试深入研究 Flash 代码本身以处理解决方案之前，有什么可能的解决方法吗？

所以我找到了这个问题的解决方法，尽管不完全确定它为什么有效。 尽管 Firefox 同时支持"滚轮"和"鼠标滚轮"事件，但将我们的侦听器注册到这些事件并没有产生所需的行为。然而，听"DOMMouseScroll"活动效果很好。

不确定这是否是由于某些特定于浏览器的逻辑和/或我们的旧版 Flash 代码如何处理滚动，但它可以工作，所以我很满意。 :)

相关文章：