GWT MouseWheelHandler 在 Firefox 中不起作用

Question

我正在尝试制作一个文本框，当有人时它会改变值 将鼠标滚轮滚动到其上。 具体来说，我的目标是 文本框中的数字在向上滚动时增加，在向上滚动时减少 我向下滚动。 但是，我很难弄清楚 鼠标滚轮处理程序。 我简化了代码，只需将值更改为 “向上”或“向下”，但就是不起作用。 但它可以编译。 我也 用 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 技能很弱，所以我仍然需要一些帮助。

Answer 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 侦听器？ 另外，如何防止窗口滚动？

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

编写此方法后不久，我了解到 GWT 的最新 svn 修订版已修复了 Firefox 的 MouseWheelEvent。 然而，我已经写好了这篇文章，而且我不想下载不稳定的版本，所以我将保留它直到下一个稳定的 GWT 版本。