1

我想将鼠标悬停在侦听器上添加到我创建的 SpanElement：

SpanElement span = Document.get().createSpanElement();
span.setInnerText("my text");

我在谷歌中找到了如何使用标签包装器，但我想在没有任何包装器的情况下做到这一点。是否可以？

谢谢你。

4

1 回答 1

7

没有 JSNI 也是可能的。

所以用你的元素：

SpanElement span = Document.get().createSpanElement();
span.setInnerText("my text");

将事件侦听器直接添加到元素：

Event.sinkEvents(span, Event.ONCLICK);
Event.setEventListener(span, new EventListener() {

    @Override
    public void onBrowserEvent(Event event) {
        if(Event.ONCLICK == event.getTypeInt()) {
            //do your on click action
        }
    }
});

...而且它看起来真的很难看；）正如您所注意到的 - 事件侦听器对于该元素构想的所有 dom 事件都是“通用的”。因此，为了确保您处理正确的事件，您应该在接收多个事件类型时检查事件类型（这次是开销——因为我们只接收了 CLICK 事件的位）。至于下沉 -> 这会初始化元素以参与 gwt 全局 dom 事件调度系统 - 事件被全局处理以减少闭包的数量，从而最大限度地减少旧 IE 浏览器中的内存泄漏。在另一件事上。您只能为每个元素设置一个事件侦听器 - 如果您设置一个新事件侦听器，它会覆盖前一个事件侦听器。因此，我假设稍后您想将 MOUSEOVER 侦听器添加到您的跨度中，而不是清除所有已添加的 CLICK 侦听器，您可能会执行以下操作：

//add mouseover event bit to existing sunk event bits
Event.sinkEvents(span, Event.getEventsSunk(span) | Event.ONMOUSEOVER);
final EventListener oldListener = Event.getEventListener(span);
Event.setEventListener(span, new EventListener() {

    @Override
    public void onBrowserEvent(Event event) {

        if(Event.ONMOUSEOVER == event.getTypeInt()) {
            //your mouseover action
        }

        if(oldListener != null) {
            oldListener.onBrowserEvent(event);
        }
    }
});

或一次添加更多事件：

//add mouseover event bit to existing sunk event bits
Event.sinkEvents(span, Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);
Event.setEventListener(span, new EventListener() {

    @Override
    public void onBrowserEvent(Event event) {

        switch(event.getTypeInt()) {
            case Event.ONCLICK:
                break;
            case Event.ONMOUSEOVER:
                break;
            case Event.ONMOUSEOUT:
                break;
        }
    }
});

所以在说完你可能会使用一个标签小部件来包装你的跨度之后;)

Label.wrap(span).addClickHandler(new ClickHandler() {

    @Override
    public void onClick(ClickEvent event) {
        //do your on click action
    }
});

最后一件事，即使你想做 DOM 编程，也不要害怕小部件——将它们视为类似于 jquery 节点包装器对象的东西。它们并不重，但提供了很大的力量。您还可以将小部件直接包装在现有的 DOM 元素上，而无需将它们附加到“面板基础结构”。

于 2012-04-14T12:34:42.270 回答