如何用JavaScript在Firefox中触发鼠标滚轮事件？ [英] How to fire mouse wheel event in Firefox with JavaScript?

问题描述

我试图使用WebDriver进行自动化测试，但是它目前无法模拟鼠标滚轮事件。作为一种解决方法，我试图用JavaScript代替这些事件。我正在做一切直接在HTML页面上进行试验，而不是在WebDriver框架内。

我特别试图在一个鼠标滚轮事件滚动div元素。

到目前为止，我已经能够使用Chrome和IE9做到这一点，但我似乎无法得到任何东西在Firefox（5。 x）。

我使用下面的跨浏览器代码来检测鼠标滚轮事件何时被触发，我从网络中断开。这个代码能够在我创建的滚动div（id ='view'）内滚动鼠标滚轮时，在所有的浏览器中获取事件。

 < script type =text / javascript> 
函数轮（事件）{
 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中触发鼠标滚轮事件，

 函数ChromeWheel（）{
 var evt = document.createEvent（ MouseEvents）; 
 evt.initEvent（'mousewheel'，true，true）; 
 evt.wheelDelta = 120; 
 view.dispatchEvent（evt）; 
} 
  

当然，它不适用于Firefox。我发现现有的文档太稀疏，难以理解FF如何处理这个问题。任何人都可以告诉我最低限度的火焰鼠标滚轮事件在火轮与轮三角洲（放置在FF期待它），这样我的处理程序将它捡起来？

微软发明的由webkit复制的，但不是Gecko ）。

而不是设置（只读）属性的事件，你应该调用适当的 init ...（）方法，这对于鼠标事件是 initMouseEvent（）。 （规范）

这是一个固定的测试用例，可以在Firefox中使用： http ：//jsfiddle.net/6nnMV/

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

I'm trying to do automated testing with WebDriver, but it currently has no ability to simulate mouse wheel events. As a workaround I'm trying to fire these events with JavaScript instead. I'm doing all my wheel experimenting on a straight HTML page right now, not within the WebDriver framework.

I'm specifically trying to fire a mouse wheel event on a scrolling div element.

So far I've been able to do this with Chrome and IE9, but I can't seem to get anything to work in Firefox (5.x).

I'm using the following cross-browser code to detect when mouse wheel events are fired, which I snagged off the net. This code is able to pick up the event in all browsers when I scroll the mouse wheel within the scrolling div I've created (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>

The function below, when called, is able fire the mouse wheel event in Chrome and IE9, and gets picked up in the above handler with expected behavior.

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

Of course, it does not work for Firefox. I've found existing documentation to be too sparse and confusing to know how FF handles this. Can anyone show me the bare minimum to fire a mouse wheel event in Firefox with a wheel delta (placed where FF expects it), such that my handler will pick it up?

解决方案

Well,

1. In the Mozilla part of the code, if you're listening for DOMMouseScroll you should dispatch a DOMMouseScroll event too, no? (mousewheel seems to be a Microsoft invention copied by webkit, but not Gecko).
2. Instead of setting (readonly) properties on the event, you're supposed to call the appropriate init...() method, which for the mouse event is initMouseEvent(). (spec)

Here's a fixed up testcase, which works in Firefox: http://jsfiddle.net/6nnMV/

Probably not useful to you, but may be of interest to other people looking to simulate events, here's how (privileged) unit tests in mozilla simulate 'real' events: http://hg.mozilla.org/mozilla-central/annotate/a666b4f809f0/testing/mochitest/tests/SimpleTest/EventUtils.js#l248

这篇关于如何用JavaScript在Firefox中触发鼠标滚轮事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！