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

我想点击一个图像，因此想注册（例如）一个点击处理程序。我从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，并将图像放在一个按钮上，从这个按钮获取元素，但都不起作用

但是请记住，如果我将小部件（图像是一个小部件）添加到面板中，它就会工作

RootPanel.get().add( colorImage );

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

---

最后，我想建立一个包含不同行的表格，在那里我可以单击图标，我会得到一个弹出菜单，从而更改行的颜色。

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

像这样：

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

---

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

像这样：

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

---

您是否尝试添加image.sinkEvents（Event.ONCLICK | Event.MOUSEEVENTS）

是否尝试添加image.sinkEvents（Event.ONCLICK | Event.MOUSEEVENTS）

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

图像必须位于焦点小部件中。我不知道这是为什么，但在某些地方，事件没有正确传播，DOM事件也没有激发。

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

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

---

如果您真的想使用html表来构建它，请查看

com.google.gwt.user.client.ui.HTMLTable

子类、

com.google.gwt.user.client.ui.Grid

和

com.google.gwt.user.client.ui.FlexTable

。这可能永远都不必要，除非您要向表中添加多个项-在尝试指定布局时，请使用实际的布局类。

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

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

---

如果您真的想使用html表来构建它，请查看

com.google.gwt.user.client.ui.HTMLTable

子类、

com.google.gwt.user.client.ui.Grid

和

com.google.gwt.user.client.ui.FlexTable

。这可能永远不会是必要的，除非您要向表中添加多个项目-在尝试指定布局时，请使用实际的布局类。

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