How to prevent the paper-ripple inside div when I click on a button

I have a div with paper-ripple and a button in it. Clicking anywhere inside the div should play the ripple animation which is working as expected but don't want the ripple when the button is clicked.

Please run the code snippet below

<!doctype html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>  
  <link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>

<body>
  <test-elem></test-elem>
  
  <dom-module id="test-elem">
    <template>
      <style>
        div { 
          width: 150px;
          position: relative; 
          padding: 15px;
          border: 1px solid black;
        }
        button { color: green; border: 1px solid green;  }
      </style>
    
      
      <div>
        <paper-ripple></paper-ripple>
        <button>Button</button>
      </div>  
    </template>
    
    <script>
      Polymer({ is: 'test-elem'})
    </script>
    
  </dom-module>

</body>

Solution

Found the answer. paper-ripple listens to the 'down' action and starts the ripple animation. So need to listen to the same action for the button and stop the event propagation.

Try the snippet below

<!doctype html>
<head>
  <base href="https://polygit.org/polymer+v1.9.2/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>  
  <link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>

<body>
  <test-elem></test-elem>
  
  <dom-module id="test-elem">
    <template>
      <style>
        div { 
          width: 150px;
          position: relative; 
          padding: 15px;
          border: 1px solid black;
        }
        button { color: green; border: 1px solid green;  }
      </style>
    
      
      <div>
        <paper-ripple></paper-ripple>
        <button id="btn">Button</button>
      </div>  
    </template>
    
    <script>
      Polymer({ is: 'test-elem',
         listeners: {'btn.down': 'onDown'},

         onDown: function(e) {
            e.stopPropagation();
         }
      });
    </script>
    
  </dom-module>

</body>