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 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 ) {
            instance.@com.proprintsgear.design_lab.client.ValueBox::decreaseValue()();
        } else {
            instance.@com.proprintsgear.design_lab.client.ValueBox::increaseValue()();
        }
        instance.@com.proprintsgear.design_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.

Answer 2

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?