How to fire mouse wheel event in Firefox with JavaScript?

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 Firefox expects it), such that my handler will pick it up?

Answer

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