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

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

Проблема заключается в том, что при очень быстром перемещении мыши событие 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; 
    } 
}

источник

2012-05-16 Arturo

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 ОТВЕТ, если вы просто беспокоюсь о 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. According to ther w3schools docs, он работает также в Safari и Opera.

источник

2012-05-17 09:17:25 Renato

Спасибо Ренато. Это очень хорошее решение для того, что я описал, но представьте, что, например, я должен изменить отображаемый ТЕКСТ, после события mouseOut. Как мне это сделать? – Arturo

Ну, неважно ... когда у вас есть GWT, вам больше ничего не нужно ... взгляните на мой отредактированный ответ, пожалуйста ....Дайте мне знать, если это решит вашу проблему. – Renato

Спасибо Ренато. Оно работает! – Arturo

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

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

источник

2012-05-16 22:20:23 NenadP

Спасибо. Я уже пробовал, но у меня все еще есть проблема. Есть идеи? – Arturo

Есть ли у вас возможность оживить пример в сети? – NenadP

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

ответ

Смежные вопросы