Question

我正在尝试创建一个TextBox，当有人改变价值时滚动鼠标滚轮。具体来说，我的目标是为了当我向上滚动时，文本框中的数字会增加，当减少时，会减少我向下滚动。但是，我很难搞清楚 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技能很弱，所以我仍然需要一些帮助。

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 ) {
            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版本。

GWT MouseWheelHandler无法在Firefox中运行

2 个答案: