如何将 GWT 单击侦听器添加到图像？答案

【问题标题】：How to add a GWT click listener to an Image?如何将 GWT 单击侦听器添加到图像？
【发布时间】：2009-12-30 17:39:55
【问题描述】：

我想点击一张图片，因此想注册（例如）一个 ClickHandler。我从 ClientResource 获得的图像。到目前为止，这可以将图像设置为表格单元格：

MyResources.INSTANCE.css().ensureInjected();
Image colorImage = new Image( MyResources.INSTANCE.colorImage() );
Element colorImageElement = colorImage.getElement();

colorImage.addClickHandler(new ClickHandler() {
 public void onClick(ClickEvent event) {
  System.out.println( event );
 }
} );

TableElement table = Document.get().createTableElement();
TableRowElement headRow = table.insertRow(-1);
headRow.insertCell(-1).appendChild( colorImageElement );

RootPanel.get().getElement().appendChild( table );

如何为图标添加监听器？我尝试了 ClickHandler 并将图像放在 PushButton 上并从此 PushButton 获取元素，但都不起作用。

但请注意，如果我将小部件（图像是小部件）添加到面板中，它会起作用！

RootPanel.get().add( colorImage );

但我在这里使用的不是小部件，而是元素。所以处理程序消失了，这就是我不知道如何保存这个添加的处理程序信息的关键。

最后，我想构建一个包含不同行的表格，我可以在其中单击图标，然后弹出一个菜单，从而更改行的颜色。

【问题讨论】：

标签： gwt

【解决方案1】：

您应该能够只添加一个 ClickHandler（或一个 MouseDownHandler，如果它更适合您的需要）。

像这样：

colorImage.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                // Do something....
            }
        });

【讨论】：

我以前试过这个，但这不起作用。我尝试了不同的处理程序，FocusWidget，......没有反应。
@Paulus：在我目前正在进行的一个项目中，我正是这样做的，但是使用 MouseDownHandler (addMouseDownHandler) 并且效果很好，单击处理程序应该同样有效。请在您实际尝试但失败的地方发布更多代码。也许这只是一个愚蠢的错字之类的。
感谢您的帮助。我用适用于 onModuleLoad() 的演示更新了我的问题，表明该解决方案不起作用。
@Paulus：可能是您只是在使用元素（为什么？在构建 UI 时不应该使用 GWT）。我想如果你绕过 GWT 为你做的所有事情，你也只需要自己向元素添加处理程序和脚本。
@Fredrik 是正确的，不要只插入元素。元素只是显示在 dom 中的标签，小部件添加了事件支持。实际上，将 Image 小部件添加到 RootPanel 将正确附加处理程序。

【解决方案2】：

不要打开小部件并仅附加 DOM 元素。 Widget 类允许您的代码同时引用元素和事件，并处理可能的内存泄漏，以及以逻辑方式对代码进行分组。

这可能对其他框架有意义，但在 GWT 中，您几乎总是希望直接使用小部件，将它们添加在一起，然后将它们附加到 RootPanel。

如果您真的想使用 html 表来构建它，请查看 com.google.gwt.user.client.ui.HTMLTable 子类、com.google.gwt.user.client.ui.Grid 和 com.google.gwt.user.client.ui.FlexTable。除非您向表中添加多个项目，否则这可能永远都不需要 - 尝试指定布局时，请使用实际的布局类。

【讨论】：

【解决方案3】：

您是否尝试添加 image.sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS)？

【讨论】：

【解决方案4】：

图像必须位于焦点小部件内。我不知道为什么会这样，但是在某处事件没有正确传播并且 DOM 事件没有触发。

【讨论】：