3

I have a DIV representing a BLUE rectangle with text "HELLO" that, when user clicks on it changes its colour to RED and text "BYE", and when user moves mouse cursor out, restores its original colour and text. These styles are described in CSS, and text is controlled from GWT Events (see Java code below).

The issue is that, when I move the mouse very fast, the ONMOUSEOUT event is not fired in any browser. But works fine 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;
    }
}

2 Answers2

2

EDIT

Given your modified question and the added complexity of changing text, let's use GWT as GWT is awesome for this kind of thing!

Ok, first our very simple CSS stylesheet:

.myStyle {
background-color: blue;
}

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

Here a very basic Widget that does pretty much exactly what you asked (sorry for changing the text, I tested this and I'm sure it will always work even when moving the mouse extremely fast) in beautiful, simple Java (GWT) code:

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 IF YOU ARE JUST WORRIED ABOUT MOUSE_OVER AND MOUSE_OUT

The solution to this problem is to stop doing this programmatically and do it using the native browser's events handling system, which is as fast as you can get.

To do this, use the CSS hover filter. For clicking, you don't need to worry, your problem is just move-in and move-out, which as you found out, are cases where you may not be able to trust the JS to handle very well. I think all browsers currently support this:

<!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>

I tested this and it works in Chrome, FF and IE9. According to ther w3schools docs, it works also in Safari and Opera.

Renato
  • 12,940
  • 3
  • 54
  • 85
  • Thanks Renato. This is a very good solution for what I described, but imagine that for example I have to change the TEXT that is displayed as well, after mouseOut event. How would I do that? –  May 17 '12 at 09:29
  • Well, doesn't matter... when you have GWT you don't need anything else.... have a look at my edited answer please.... Let me know if this solves your problem. – Renato May 17 '12 at 10:25
0

I am not in java, but i would just suggest to check if there is some other script you may have in your app that interfere with your code.

Perhaps try to isolate the code and execute it without anything else and see what happens?

NenadP
  • 585
  • 7
  • 24