0

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

4

2 回答 2

0

当文本框触发鼠标悬停事件时，我使用本机方法在 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 版本。

于 2009-06-12T13:06:00.237 回答
0

我将尝试使用本机 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 侦听器？另外如何防止窗口滚动？

于 2009-06-11T14:41:17.723 回答