Polymer Template stop event bubbling

Hi,

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?

Hi,

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.

Here is the documentation about Event.stopPropagation:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation

here is the code:
https://github.com/DiegoSanzVi/stopPropagation

polymer html component

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-button/src/vaadin-button.html">

<dom-module id="test-button">
   <template>
       <style>
           :host {
               width: 100%;
           }
       </style>
       <div on-click="handleClickDiv" style="background-color:orange;width:100%;">
           <vaadin-button on-click="handleClickButton" id="vaadinButton">
               Button
           </vaadin-button>
       </div>
   </template>

   <script>
       class TestButton extends Polymer.Element {
           static get is() {
               return 'test-button';
           }

           static get properties() {
               return {
                   // Declare your properties here.
               };
           }

           handleClickDiv(){
               alert("Click on Div");
           }

           handleClickButton(event){
               console.log("Click on Button");
               event.stopPropagation();
           }

       }
       customElements.define(TestButton.is, TestButton);
   </script>
</dom-module>

Java companion file


@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.
    }

}