3

我有一个 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;
    }
}
4

2 回答 2

2

编辑

鉴于您修改后的问题和更改文本的额外复杂性，让我们使用 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。

于 2012-05-17T09:17:25.810 回答
0

我不在java中，但我只是建议检查您的应用程序中是否有其他脚本会干扰您的代码。

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

于 2012-05-16T22:20:23.533 回答