我有一个 DIV 表示一个带有文本"HELLO"的蓝色矩形，当用户单击它时，它的颜色更改为红色和文本"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;
}
}
编辑
鉴于您修改后的问题和更改文本的复杂性增加，让我们使用 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。
我不在 java 中，但我只是建议检查您的应用程序中是否有其他脚本干扰您的代码。
也许尝试隔离代码并在没有其他任何东西的情况下执行它，看看会发生什么？