3

私は、テキスト「HELLO」の青い長方形を表すDIVを持っています。これは、ユーザーがクリックすると色が赤に変わり、テキストが「BYE」になり、ユーザーがマウスカーソルを外側に動かすと、元の色とテキストに戻ります。これらのスタイルはCSSで記述されており、テキストはGWTイベントから制御されます（以下のJavaコードを参照）。

問題は、マウスを非常に速く動かすと、どのブラウザでもONMOUSEOUTイベントが発生しないことです。しかし、ゆっくり動かすとうまくいきます。

何かアイデアはありますか？ありがとう

MyFile.html

<div id="boxDiv" class="myStyle"></div>

MyFile.java

final Element boxDiv = DOM.getElementById("boxDiv");
DOM.sinkEvents((com.google.gwt.user.client.Element)boxDiv,Event.ONCLICK | Event.ONMOUSEOUT);
DOM.setEventListener((com.google.gwt.user.client.Element)boxDiv,new EventListener(){
    public void onBrowserEvent(Event e) { 
        Element targetDiv = DOM.eventGetTarget(e);
        switch (DOM.eventGetType(e)) {
      case Event.ONCLICK: onClickHandler(e, targetDiv); break;
          case Event.ONMOUSEOUT: onMouseOutHandler(e, targetDiv); break;
    }
}
4

2 に答える 2

2

編集

変更された質問とテキスト変更の複雑さが増したことを踏まえて、GWTはこの種のことには最適なので、GWTを使用しましょう。

さて、最初に私たちの非常に単純なCSSスタイルシート：

.myStyle {
background-color: blue;
}

.myStyle-clicked {
background-color: red;
}

これは非常に基本的なウィジェットであり、美しくシンプルなJava（GWT）コードで、あなたが求めたことをほぼ正確に実行します（テキストを変更して申し訳ありませんが、これをテストしました。マウスを非常に高速に動かしても常に機能すると確信しています）。

private class MyWidget extends Composite {

    private Label label = new Label();
    private static final String originalText = "Hello world!";
    private static final String clickedText = "Goodbye world!";

    public MyWidget() {
        sinkEvents(Event.ONCLICK | Event.ONMOUSEOUT);
        label.setText(originalText);
        initWidget(label);
        setStyleName("myStyle");
    }

    @Override
    public void onBrowserEvent(Event event) {
        super.onBrowserEvent(event);
        switch (event.getTypeInt()) {
        case Event.ONCLICK:
            addStyleDependentName("clicked");
            label.setText(clickedText);
            break;
        case Event.ONMOUSEOUT:
            removeStyleDependentName("clicked");
            label.setText(originalText);
            break;
        }
    }

}

MOUSE_OVERとMOUSE_OUTについて心配しているだけの場合は、古い回答

この問題の解決策は、これをプログラムで実行するのをやめ、ネイティブブラウザのイベント処理システムを使用して実行することです。これは可能な限り高速です。

これを行うには、CSSホバーフィルターを使用します。クリックする場合、心配する必要はありません。問題は、入居と退去だけです。これは、ご存知のとおり、JSの処理を信頼できない場合があります。現在、すべてのブラウザがこれをサポートしていると思います。

<!DOCTYPE html>

<html>
  <head>
   <style>
    .tt {
       background-color: blue;
    }
    .tt:hover {
       background-color: red;
    }
   </style>
  </head>
  <body>
    <div class="tt">
        The content of the body element is displayed in your browser.
    </div>
  </body>
</html>

これをテストしたところ、Chrome、FF、IE9で動作します。w3schoolsのドキュメントによると、SafariとOperaでも機能します。

于 2012-05-17T09:17:25.810 に答える
0

私はJavaを使用していませんが、コードに干渉する可能性のある他のスクリプトがアプリにあるかどうかを確認することをお勧めします。

おそらく、コードを分離して何もせずに実行し、何が起こるかを確認してみてください。

于 2012-05-16T22:20:23.533 に答える