Geek asks and answers

The OnMouseOut event does not fire when you quickly move the mouse (GWT - all browsers)

I have a DIV representing a blue color with the text โ€œHELLOโ€, which, when the user clicks on it, changes its color to RED and the text โ€œBYEโ€, and when the user moves the mouse cursor, it restores its original color and text. These styles are described in CSS, and the text is controlled from GWT Events (see Java Code below).

The problem is that when I move the mouse very quickly, the ONMOUSEOUT event does not fire in any browser. But it works great if I move it slowly.

Any ideas please? THANKS

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;
    }
}
+3
source share
2 answers

EDIT

, 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;
        }
    }

}

OLD ANSWER, MOUSE_OVER MOUSE_OUT

, , , .

hover. , , , , , , , 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.

+3

java, , script, .

, - , ?

+1

More articles:


All Articles