GWT MouseWheelHandler 在 Firefox 中不起作用答案

【问题标题】：GWT MouseWheelHandler not working in FirefoxGWT MouseWheelHandler 在 Firefox 中不起作用
【发布时间】：2009-06-09 14:11:25
【问题描述】：

我正在尝试制作一个文本框，当有人在它上面滚动鼠标滚轮。具体来说，我的目标是文本框中的数字在我向上滚动时增加，在我滚动时减少我向下滚动。但是，我无法弄清楚鼠标轮处理程序。我简化了我的代码，只是将值更改为 “UP”或“DOWN”，但它不起作用。它虽然编译。我也用 event.preventDefault() 尝试过，但似乎没有效果。

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");
      }
   }
});

编辑：我刚刚在 Chromium 和 Opera 中对其进行了测试，它运行良好。不幸的是，它仍然无法在我的支持浏览器（Firefox 和 IE）中运行。

编辑：决定尝试原生 Javascript 方法。我的 Javascript 技能很弱，所以我仍然需要一些帮助。

【问题讨论】：

标签： javascript firefox events gwt mousewheel

【解决方案1】：

我将尝试使用原生 Javascript 方法解决这个问题。我得到了这个工作。

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);
}-*/;

现在我正在寻找一种将 DOMMouseScroll 侦听器添加到元素本身的方法。这是可能的，还是只要用户将鼠标悬停在元素上，我就应该为窗口创建一个 DOMMouseScroll 侦听器？还有如何防止窗口滚动？

【讨论】：

【解决方案2】：

当文本框触发鼠标悬停事件时，我使用本地方法在 Firefox 下成功运行该方法，该方法会向窗口添加鼠标滚轮侦听器。

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);
    }
}-*/;

写完这个方法后不久，我得知 GWT 的最新 svn 版本已经修复了 Firefox 的 MouseWheelEvent。不过，我已经写好了，我不想下载不稳定的版本，所以我会一直保留到下一个稳定的 GWT 版本。

【讨论】：