Событие OnMouseOut не запускается при быстром перемещении мыши (GWT — все браузеры)

У меня есть DIV, представляющий СИНИЙ прямоугольник с текстом «HELLO», который, когда пользователь нажимает на него, меняет свой цвет на RED и текст «BYE», а когда пользователь перемещает курсор мыши, восстанавливает исходный цвет и текст. Эти стили описаны в CSS, а текст управляется событиями GWT (см. код Java ниже).

Проблема в том, что когда я очень быстро перемещаю мышь, событие ONMOUSEOUT не запускается ни в одном браузере. Но работает нормально, если я двигаю его медленно.

Есть идеи, пожалуйста? БЛАГОДАРНОСТЬ

Мой файл.html

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

Мой файл.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;
    }
}

events css onmouseout gwt
person Community    schedule 16.05.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

ИЗМЕНИТЬ

Учитывая ваш измененный вопрос и дополнительную сложность изменения текста, давайте использовать 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-фильтр 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.

person Renato    schedule 17.05.2012
comment
Спасибо Ренато. Это очень хорошее решение для того, что я описал, но представьте, что, например, мне нужно изменить отображаемый ТЕКСТ после события mouseOut. Как бы я это сделал? - person ; 17.05.2012
comment
Ну, не имеет значения ... когда у вас есть GWT, вам больше ничего не нужно ... посмотрите мой отредактированный ответ, пожалуйста .... Дайте мне знать, решит ли это вашу проблему. - person Renato; 17.05.2012

arrow_upward
0
arrow_downward

Я не в java, но я бы просто предложил проверить, есть ли в вашем приложении какой-то другой скрипт, который мешает вашему коду.

Может быть, попробовать изолировать код и выполнить его без всего остального и посмотреть, что получится?

person NenadP    schedule 16.05.2012
comment
Спасибо. Я уже пробовал, но у меня все еще есть проблема. Любые идеи? - person ; 17.05.2012
comment
Есть ли у вас возможность разместить живой пример в сети? - person NenadP; 17.05.2012