2009-06-09 24 views
0

マウスホイールをスクロールして値を変更するTextBoxを作成しようとしています。具体的には、私の目標は、スクロールアップするときにテキストボックス内の数字 を増やし、 がスクロールしたときに減少することです。しかし、私は MouseWheelHandlerを調べることに問題があります。 "UP"または "DOWN"に値を変更するようにコードを単純化しましたが、機能しません。それはしかしコンパイルする。私も はevent.preventDefault()で試しましたが、それは の効果がないようです。GWT MouseWheelHandlerがFirefoxで動作しない

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

編集:私はクロムとOperaでそれをテストし、それがうまく働きました。残念ながら、それは私のブラウザー(FirefoxとIE)でサポートされていません。

編集:ネイティブのJavascriptメソッドを試してみることにしました。私のJavascriptスキルは弱いので、まだ助けが必要です。

答えて

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) { 
      [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リリースまでこれを保存します。

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リスナーを作成するだけですか?また、ウィンドウがスクロールしないようにするにはどうすればよいですか?

関連する問題