Question

我有一个DIV代表一个带有文字“HELLO”的蓝色矩形，当用户点击它时，它的颜色变为红色并发送文字“BYE”，当用户将鼠标光标移出时，恢复其原始颜色和文字。这些样式在CSS中描述，文本由GWT Events控制（参见下面的Java代码）。

问题在于，当我快速移动鼠标时，不会在任何浏览器中触发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;
    }
}

Answer 1

修改

鉴于您修改过的问题以及更改文本的复杂性，让我们使用GWT，因为GWT对于这类事情来说非常棒！

好的，首先是我们非常简单的CSS样式表：

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

这是一个非常基本的Widget，它完全按照你提出的要求（抱歉改变文本，我测试了这个，并且我确信即使在非常快速地移动鼠标时它也会一直工作）在美丽，简单的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。 According to ther w3schools docs，它也适用于Safari和Opera。

Answer 2

我不是在java中，但我建议您检查一下您的应用中是否有其他可能干扰您代码的脚本。

或许尝试隔离代码并在没有任何其他情况下执行它，看看会发生什么？

快速移动鼠标时未触发OnMouseOut事件（GWT - 所有浏览器）

2 个答案: