Question

我想在GWT 1.6中监听鼠标悬停事件。由于GWT 1.6引入了处理程序并且不赞成使用者，因此我不确定如何通过少量信息来实现这一点。

注意：我有一个Element对象。这就是我需要添加鼠标处理程序。我为自己的不清楚而道歉。

谢谢！

Answer 1

我希望在我需要自己解决这个问题之前，我们会看到答案。他发布的示例代码中存在一些错误，但post by Mark Renouf in this thread具有我们所需的大部分内容。

假设您想在自定义小部件上侦听鼠标悬停和鼠标移出事件。在您的小部件中，添加两个方法：

public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
  return addDomHandler(handler, MouseOverEvent.getType());
}

public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
  return addDomHandler(handler, MouseOutEvent.getType());
}

然后创建一个处理程序类：

public class MyMouseEventHandler implements MouseOverHandler, MouseOutHandler {
  public void onMouseOver(final MouseOverEvent moe) {
    Widget widget = (Widget) moe.getSource();
    widget.addStyleName("my-mouse-over");
  }

  public void onMouseOut(final MouseOutEvent moe) {
    Widget widget = (Widget) moe.getSource();
    widget.removeStyleName("my-mouse-over");
  }
}

最后，将处理程序添加到窗口小部件：

myWidget.addMouseOverHandler(new MyMouseEventHandler());
myWidget.addMouseOutHandler(new MyMouseEventHandler());

如果您只是通过事件监听鼠标，则可以跳过鼠标处理。如果您没有制作自定义小部件，那么小部件我已经有了添加处理程序的方法。

最后，根据帖子的警告，请记住addDomHandler鼠标事件，而不是addHandler。

Answer 2

您希望在班级中实现这些界面：

HasMouseOverHandlers
HasMouseOutHandlers
MouseOverHandler
的mouseOutHandler

当鼠标进入元素时会触发MouseOverEvent，而MouseOutEvent在不再结束时会被触发。

HasMouseOverHandler 的实现方式如下：

public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
    return addDomHandler(handler, MouseOverEvent.getType());
}

HasMouseOutHandler 的实现方式如下：

public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
    return addDomHandler(handler, MouseOutEvent.getType());
}

之后，您只需使用MouseOverHandler和MouseOutHandler处理事件，之后应该非常简单。

如果你想将一个EventHandler添加到HTML中已经存在的元素中，我想出的唯一想法是创建一个包装类。 这是完全未经测试的。

class ElementWrapper extends UIObject implements HasMouseOverHandlers, 
HasMouseOutHandlers
{
     public ElementWrapper(Element theElement)
     {
        setElement(theElement);
     }   

    public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
        return addDomHandler(handler, MouseOutEvent.getType());
    }

    public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
        return addDomHandler(handler, MouseOverEvent.getType());
    }
}

然后你可以从HTML中获取一个现有的元素并像这样初始化：

onModuleLoad()
{
    Element theElement = RootPanel().get("elementID");
    ElementWrapper wrapper = new ElementWrapper(theElement);
    wrapper.addMouseOverHandler(new myHandler());

}

希望这有帮助。

Answer 3

如果您知道元素的类型，则可以包装Element并获取相应的Widget。例如，在Image：

的情况下

Element el = DOM.getElementById("someImageOnThePage");
Image i = Image.wrap(el);
i.addMouseOverHandler(...);

我遇到的唯一问题是如果元素已经附加到另一个父窗口小部件，你将在HostedMode中得到一个AssertionError。然而，它在生产中会很好用。这个断言可能有充分的理由，所以要小心。

Answer 4

如果您知道对象的类型，则某些小部件包含静态包装函数。从其中一个我能够得到以下课程。

public class Widget extends com.google.gwt.user.client.ui.Widget
{
    public Widget(Element element, boolean detatchFromDom)
    {
        super();
        if (detatchFromDom)
            element.removeFromParent();

        setElement(element);

        if (!detatchFromDom)
        {
            onAttach();
            RootPanel.detachOnWindowClose(this);
        }
    }

    public <H extends EventHandler> HandlerRegistration addDomHandlerPub(final H handler, DomEvent.Type<H> type)
    {
        return addDomHandler(handler, type);
    }
}

将MouseOverHandler添加到元素？

4 个答案: