paper-ripple mouseDown 事件处理程序 downAction Override

Question

聚合物 1.1

在 paper ripple source code 他们有 mouseDown 事件处理程序：

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

在文档中指出：

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

但是，在我的自定义元素中，我无法覆盖此处理程序：

        <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();
      }

当我通过点击我的元素引发纸张波纹动作时，我没有得到任何控制台输出。

如何覆盖 paper-ripple 侦听的 mouseDown 的默认 downAction 处理程序，如 paper-ripple doc 中所述？

Answer 1

最有可能的文档假设应该添加一个侦听器，例如

listeners: {
    'up' : 'upAction',
    'down' : 'downAction',
}

您仍然可以覆盖这些方法，但这可能不是应该使用 ripple 元素的方式：

ready: function(){
   this.ripplesDownAction = this.$.ripple.downAction.bind(this.$.ripple);
   this.$.ripple.downAction = this.downAction.bind(this);
},

downAction: function(e) {
    console.log('sssssssssssssssssssssssss');
    this.ripplesDownAction();
}

paper-ripple mouseDown 事件处理程序 downAction Override

paper-ripple mouseDown event handler downAction Override

javascript

polymer

polymer-1.0

paper-elements