How to add a GWT click listener to an Image?

Question

I want to click on an image and therefore want to register (e.g.) a ClickHandler. The image I get from a ClientResource. This works so far to set the image into a table cell:

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 );

How can I add a listener to the icon? I tried ClickHandler and to put the image on a PushButton and get the Element from this PushButton but all don't work.

But mind, if I add the widget (Image is a Widget) to a panel it works!

RootPanel.get().add( colorImage );

But I am not working with widgets here but with the Element. So the handler disappears and that's the point I don't get how to preserve this added handler information.

In the end I would like to build a table with different rows where I can click on the icon I get a popup menu and thereby change the colour of the row.

Answer 1

You should be able to just add a ClickHandler (or a MouseDownHandler if that fits your needs better).

Like this:

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

Answer 2

did you tried to add image.sinkEvents( Event.ONCLICK | Event.MOUSEEVENTS )?