如何使用 JavaScript 在 Firefox 中触发鼠标滚轮事件？

Posted 2023-04-13

【中文标题】如何使用 JavaScript 在 Firefox 中触发鼠标滚轮事件？

【英文标题】：How to fire mouse wheel event in Firefox with JavaScript?

【发布时间】：2011-10-07 19:52:21

【问题描述】：

我正在尝试使用 WebDriver 进行自动化测试，但它目前无法模拟鼠标滚轮事件。作为一种解决方法，我尝试使用 javascript 来触发这些事件。我现在正在一个直接的 html 页面上做所有的***试验，而不是在 WebDriver 框架内。

我特别想在滚动的 div 元素上触发鼠标滚轮事件。

到目前为止，我已经能够使用 Chrome 和 IE9 执行此操作，但我似乎无法在 Firefox (5.x) 中使用任何东西。

我正在使用以下跨浏览器代码来检测鼠标滚轮事件何时被触发，这是我从网上获取的。当我在我创建的滚动 div (id='view') 中滚动鼠标滚轮时，此代码能够在所有浏览器中获取事件。

<script type="text/javascript">
  function wheel(event) 
    var delta = 0;
    if (!event) 
      event = view.event;
    
    if (event.wheelDelta) 
      delta = event.wheelDelta / 120;
    
    else if (event.detail) 
      delta = -event.detail / 3;
    
    
    alert(delta);
  
  
  var view = document.getElementById('view');
  
  if (view.addEventListener) 
    view.addEventListener('DOMMouseScroll', wheel, false);
  
  
  view.onmousewheel = wheel;
</script>

下面的函数在调用时能够在 Chrome 和 IE9 中触发鼠标滚轮事件，并在上述处理程序中以预期的行为被拾取。

function ChromeWheel () 
  var evt = document.createEvent("MouseEvents");
  evt.initEvent('mousewheel', true, true);
  evt.wheelDelta = 120;
  view.dispatchEvent(evt);

当然，它不适用于 Firefox。我发现现有的文档太稀少和令人困惑，不知道 FF 如何处理这个问题。谁能告诉我在 Firefox 中使用滚轮增量（放置在 Firefox 期望的位置）触发鼠标滚轮事件的最低限度，以便我的处理程序将其拾取？

【问题讨论】：

我一直想知道为什么人们想像这样直接触发原生事件。如果是你的页面和你的代码，你想看看鼠标滚动的效果，为什么不直接调用当你的代码收到鼠标滚动事件时执行的函数。您应该能够将其从代码中剔除并直接调用它而无需通过事件系统，然后它将具有零浏览器依赖性并且可以在任何地方工作。

因为它不仅仅是我的代码，而且我什至对将事件作为我的应用程序的一部分触发也不感兴趣。我正在尝试将应用程序作为 QA 流程的一部分来运行，对我们来说重要的是，我们不要到处修改代码。

OK - 有助于了解您想要做什么。难道没有专业的工具用于网页的 QA 测试，这些工具将模拟各种用户事件，包括各种鼠标事件，并且这些工具在系统级别注入事件，以便它们适用于所有浏览器？

我在第一段中说过，我为此目的使用了 WebDriver（Selenium 的一部分）。它模拟了一些东西；鼠标滚轮目前不是其中之一。

对不起，我第一次错过了。

【参考方案1】：

嗯，

在代码的 Mozilla 部分，如果您正在侦听 DOMMouseScroll，您也应该调度 DOMMouseScroll 事件，不是吗？ （鼠标滚轮好像是Microsoft invention copied by webkit, but not Gecko）。 您应该调用适当的init...() 方法，而不是在事件上设置（只读）属性，该方法对于鼠标事件是initMouseEvent()。 (spec)

这是一个固定的测试用例，适用于 Firefox：http://jsfiddle.net/6nnMV/

可能对您没有用，但可能对希望模拟事件的其他人感兴趣，以下是 Mozilla 中的（特权）单元测试如何模拟“真实”事件：http://hg.mozilla.org/mozilla-central/annotate/a666b4f809f0/testing/mochitest/tests/SimpleTest/EventUtils.js#l248

【讨论】：

根据规范，似乎 initWheelEvent() 可能是一个更好的选择（或者它是否通常还没有实现？）。然而，该演示显然有效，并且参考资料非常宝贵。谢谢。

@jaquadro：是的，还没有在 Mozilla 中：mxr.mozilla.org/mozilla-central/search?string=initWheelEvent

你为什么选择值“120”作为我认为的“滚动量”值？这实际上意味着什么？

@thisissami：抱歉，我只是从原始问题中复制了值。 developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… 有文档，但我想这是错误的，“详细信息”的含义取决于操作系统。

您可以在单独的问题中测试或提问。我猜不会，因为触发合成事件usually doesn't have any effect other than triggering event listeners。