paper-ripple mouseDown event handler downAction Override

Polymer 1.1

In paper ripple source code they have the mouseDown event handler:

  /** @param {Event=} event */
  downAction: function(event) {
    var xCenter = this.containerMetrics.width / 2;
    var yCenter = this.containerMetrics.height / 2;

In documentation it states:

paper-ripple listens to "mousedown" and "mouseup" events so it would display ripple effect when touches on it. You can also defeat the default behavior and manually route the down and up actions to the ripple element

However, in my custom element I am not able to override this handler:

        <paper-ripple
          fit
          id="ripple"
          initial-opacity="0.95"
          opacity-decay-velocity="0.98">
        </paper-ripple>
      </section>
    </template>
  </template>

  <script>
    Polymer({
      is: "portfolio-page",
     ...
      downAction: function(e) {
        console.log('sssssssssssssssssssssssss');
      },
      upAction: function(e) {
        this.$.ripple.upAction();
      }

When I induce the action of paper ripple by clicking on my element, I do not get any console output.

How do I override the default downAction handler for mouseDown that paper-ripple listens for as documented in paper-ripple doc?

Copyright Notice：Content Author:「dman」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/33060861/paper-ripple-mousedown-event-handler-downaction-override