CODEWITHSUNDEEP
javavaadin
Erika Hernández
Erika Hernández

Reputation: 377

How to prevent the propagation of an onclick event to a child element in Vaadin?

I need that when I click to an image element an event is executed, and on the other side, when I click on UI.getCurrent() element another distinct event is executed

I have within the UI element an AbsoluteLayout (leftLayout) and within this is located the image.

Actually, when I click in the image, the two events are triggered: the "Game Over" notification is displayed and under it appears the "Good" notification.

How to prevent the propagation of the onclick UI.getCurrent() event to the image element?

public class VaadinmatchinggameUI extends UI{
   //...
   private AbsoluteLayout leftLayout = new AbsoluteLayout();
   ///...
    @Override
    protected void init(VaadinRequest request) {
     //...
     UI.getCurrent().addClickListener(new ClickListener() {

        @Override
        public void click(ClickEvent event) {
            Notification.show("Game Over");
        }
    }); 
     addImg();
    }
    private void addImg() {
      //...
      FileResource resource = new FileResource(new File(PATH));
      Image face = face = new Image(null, resource);
      leftLayout.addComponent(face, "top:" + randomTop 
                    + "px; left:" + randomLeft + "px;");
      face.addClickListener(new ClickListener() {
            @Override
            public void click(ClickEvent event) {
                Notification.show("Good", Notification.Type.HUMANIZED_MESSAGE);
            }
        });

    }
}

Upvotes: 2

Views: 1339

Answers (1)

Dragan Radevic
Dragan Radevic

Reputation: 801

The solution is to add click listener on the layout and when you catch click check click position.

See the code below:

// Listen for layout click events
layout.addListener(new LayoutClickListener() {
 public void layoutClick(LayoutClickEvent event) {

     // Get the child component which was clicked
     Component child = event.getChildComponent();

     if (child == null) {
         // Not over any child component
         getWindow().showNotification(
                 "The click was not over any component.");
     } else {
         // Over a child component
         getWindow().showNotification(
                 "The click was over a "
                         + child.getClass().getCanonicalName());
     }
 }
});

the complete example you can find on the link: ClickableLayoutBasicExample.java

This code is tested for Vaadin 6, but with small modifications will work for Vaadin 7 also.

Upvotes: 2

Related Questions