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

【问题标题】：OnMouseOut event not triggered when moving mouse fast (GWT - all browsers)快速移动鼠标时未触发 OnMouseOut 事件（GWT - 所有浏览器）
【发布时间】：2012-05-24 11:33:16
【问题描述】：

我有一个 DIV 代表一个带有文本“HELLO”的蓝色矩形，当用户单击它时，它的颜色将变为红色，文本“BYE”，当用户将鼠标光标移出时，恢复其原始颜色和文本。这些样式在 CSS 中描述，文本由 GWT 事件控制（参见下面的 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;
    }
}

【问题讨论】：

标签： css events gwt onmouseout

【解决方案1】：

编辑

考虑到您修改后的问题以及更改文本所增加的复杂性，让我们使用 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。 According to ther w3schools docs，它也适用于 Safari 和 Opera。

【讨论】：

谢谢雷纳托。对于我所描述的内容，这是一个非常好的解决方案，但想象一下，例如，在 mouseOut 事件之后，我还必须更改显示的 TEXT。我该怎么做？
好吧，没关系......当你拥有 GWT 时，你不需要任何其他东西......请看看我编辑的答案......如果这能解决，请告诉我你的问题。

【解决方案2】：

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

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

【讨论】：

谢谢。我已经尝试过了，但我仍然有问题。有什么想法吗？
你有能力在网上做一个活生生的例子吗？