I have a polymer template which has an div and a vaadin-button inside it. The vaadin button has an on-click handler which handled on the serverside. The div has on on-click handler which is process on the client side. How can I stop the event when clicking the on the vaadin-button so that it doesn’t progress to the parent div?
the solution for stopping the propagation of events from the button(children) to the div(parent) is to use Event.stopPropation in the JS click handler of the Button. This way the event will never reach the div(Parent).
You will be able to manage the button clickEvent in the Java Companion file and the div click event on the JS side.
@Tag("test-button")
@HtmlImport("src/test-button.html")
public class TestButton extends PolymerTemplate<TestButton.TestButtonModel> {
@Id("vaadinButton")
private Button vaadinButton;
public TestButton() {
// You can initialise any data required for the connected UI components here.
vaadinButton.addClickListener(buttonClickEvent -> {
System.out.print("buttonClickEvent");
});
}
public interface TestButtonModel extends TemplateModel {
// Add setters and getters for template properties here.
}
}