Question

A bit of context: I’ve been playing with uiBinder recently in an attempt to improve our approach to layout and reduce the number of Widgets our code relies on. As part of that, I’m trying to use HTML as opposed to Widgets as much as possible, and I decided to test event bubbling to dispatch child events to a parent widget where possible.

I proceeded to attach a Dom event handler to my parent widget, with the idea to handle events based on the type of html element that sourced the event which I would test for using instanceof.

My uiBinder code looks like this:

<g:HTMLPanel>
  <table>
    <tr>
      <td><input type="text" ui:field = "input0"/></td>
    </tr>
  </table>
<div>Click Me please</div>
</g:HTMLPanel>

And the class implementation:

public class MyWidget extends Composite {
  private static MyWidgetUiBinder uiBinder = GWT.create(MyWidgetUiBinder.class);
  interface MyWidgetUiBinder extends UiBinder<Widget, MyWidget> {}
  @UiField
  InputElement input0;
  public MyWidget() {
    initWidget(uiBinder.createAndBindUi(this));
    super.addDomHandler(new ClickHandler(){

      @Override
      public void onClick(ClickEvent event) {
        System.out.print("Hi");
        Element el = Element.as(event.getNativeEvent().getEventTarget());
        if(el instanceof InputElement){
          Window.alert("It is an INPUT ELEMENT");
        }
        if(el instanceof SpanElement){
          Window.alert("It is a SPAN!");
        }
        if(el instanceof DivElement){
          Window.alert("NO, it is a DIV!!!");
        }
      }
    }, ClickEvent.getType());
}

Now, what happens when I display on MyWidget is something I cannot understand. A click to both the text box and the div, or anywhere within the region of MyWidget results in ALL of the conditions in the click handler to be satisfied. All window alerts show up.

What’s the reason for this, and how can I work around this issue? It must be something within GWT and the way it maps to HTML elements.

Thanks!

Answer 1

This is due to use of overlay types in the GWT/DOM mapping.