Question

我想点击图片，因此想要注册（例如）一个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获取Element，但都不起作用。

但是请注意，如果我将小部件（图像是一个小工具）添加到它可以工作的面板！

RootPanel.get().add( colorImage );

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

最后我想构建一个包含不同行的表格，我可以点击图标，我会看到一个弹出菜单，从而改变行的颜色。

Answer 1

您应该只需添加一个Click Handler（或者一个MouseDown Handler，如果能更好地满足您的需求）。

像这样：

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

Answer 2

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

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

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

Answer 3

你试过添加image.sinkEvents（Event.ONCLICK | Event.MOUSEEVENTS）吗？

Answer 4

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

如何将GWT点击监听器添加到图像？

4 个答案: