Question

I have a MenuButton which consists of a Image and a Text under the image. The whole thing is build like this:

    ImageResource icon = ...;
    final Element span = DOM.createSpan();

    Image image = new Image(icon);
    span.insertFirst(image.getElement());

    Element div = DOM.createDiv();
    div.setInnerHTML(text);

    span.insertAfter(div, span);

    image.sinkEvents(Event.ONCLICK);

    getElement().insertFirst(span);

The click event is set in the presenter like this:

       ...
       private void bindEvents() {
        display.getButton().addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                Window.alert("test");
             }
    });

The click event works just partly, when I click on the text under the image the click event works fine but when I click on the Image no click is performed!?

Answer 1

A different approach:

FlowPanel myButton = new FlowPanel();
myButton.add(new Image(icon));
myButton.add(new Label(myButtonText));

ClickHandler h = new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        // do something
    }
};
myButton.addDomHandler(h, ClickEvent.getType());

This will catch a click event on both image and the text under it.