GWT MouseWheelHandler not working in Firefox

Question

I'm trying to make a TextBox that will change value when someone scrolls the mouse wheel over it. Specifically, my goal is for the number in the text box to increase when i scroll up, and decrease when i scroll down. However, I'm having trouble figuring out the MouseWheelHandler. I simplified my code to just change the value to "UP" or "DOWN", but it just doesn't work. It compiles though. I also tried it with event.preventDefault(), but that didn't seem to have any effect.

private TextBox valueField = new TextBox();
...
...
valueField.addMouseWheelHandler(new MouseWheelHandler() {
   public void onMouseWheel(MouseWheelEvent event) {
      //event.preventDefault();
      if(event.isNorth()) {
         valueField.setText("UP");
      } else {
         valueField.setText("DOWN");
      }
   }
});

Edit: I just tested it in Chromium and Opera, and it worked fine. Unfortunately, it still does not work in my supported browsers (Firefox and IE).

Edit: Decided to try a native Javascript method. My Javascript skills are weak, so I still need some help.

Answer 1

I'm going to try to solve this problem with a native Javascript method. I got this to work.

private static native void addNativeMouseWheelListener(String id) /*-{
 function scrollWheelMove (e) {
  if ($wnd.event || $wnd.Event) {
   if (!e) e = $wnd.event;
   if (e.wheelDelta <= 0 || e.detail > 0 ) {
    $wnd.alert("DOWN");
   } else {
    $wnd.alert("UP");
   }
  }
 }

 //var box=$doc.getElementById(id);
 $wnd.addEventListener("DOMMouseScroll", scrollWheelMove, false);
}-*/;

Now I'm looking for a way to add a DOMMouseScroll listener to the element itself. Is this possible, or should I just create a DOMMouseScroll listener for the window whenever a user mouses over the element? Also how do I prevent the window from scrolling?

Answer 2

I got this successfully running under Firefox using a native method that adds a mouse wheel listener to the window when the text box fires a mouseover event.

protected void onAttach() {
    super.onAttach();
    String fieldId = "box"+Random.nextInt(10000);
    valueField.getElement().setId(fieldId);
    addNativeMouseWheelListener(this, fieldId);
}
...
private native void addNativeMouseWheelListener(ValueBox instance, String id) /*-{
    function mouseOverHandler(e) {
     $wnd.addEventListener("DOMMouseScroll", scrollWheelMove, false);
    }

    function mouseOutHandler(e) {
     $wnd.removeEventListener("DOMMouseScroll", scrollWheelMove, false);
    }

    function scrollWheelMove(e) {
     e.preventDefault();
     if (e.wheelDelta <= 0 || e.detail > 0 ) {
      [email protected]_lab.client.ValueBox::decreaseValue()();
     } else {
      [email protected]_lab.client.ValueBox::increaseValue()();
     }
     [email protected]_lab.client.ValueBox::fireChange()();
    }

    if($wnd.addEventListener) {
     var box=$doc.getElementById(id);
     box.addEventListener("mouseout",mouseOutHandler,false);
     box.addEventListener("mouseover",mouseOverHandler,false);
    }
}-*/;

Shortly after writing this method, I learned that the latest svn revisions of GWT have fixed the MouseWheelEvent for Firefox. However, I've already got this written, and I don't feel like downloading an unstable release, so I'll keep this until the next stable GWT release.