如何在 Polymer 中的内容元素上设置点击事件侦听器？

Question

我使用的是 polymer 0.8，我知道它有一个新的 API，但我在任何地方都找不到关于这个问题的参考。我正在努力实现这一目标：

<center-focusable>
    <template is="x-autobind">
        <span on-click="setFocus">test?</span>
    </template>
</center-focusable>

哪个错误：

[span].[click]: event handler [setFocus] is null in scope ()

我的元素是这样定义的：

<dom-module id="center-focusable">
    <template>
        <span on-click="setFocus">I work</span>
        <content></content>
    </template>
</dom-module>

<script>
    Polymer({
        is: "center-focusable",
        setFocus: function () {
            console.log("test");
        }
    });
</script>

这不可能吗？

Answer 1

我最后做的是定义另一个自定义元素，它将触发一个自定义事件供我捕获。

<dom-module id="focusable-element">
  <content></content>
</dom-module>

<script>
  Polymer({
    is: "focusable-element",
    listeners: {
      'click': 'setFocus'
    },
    setFocus: function () {
      this.fire("center-focusable:center");
    }
  });
</script>

那我去抓:

<script>
  Polymer({
    is: "center-focusable",
    listeners: {
      'center-focusable:center': 'setFocus'
    },
    setFocus: function (e) {
      e.stopPropagation();
      console.log("test");
    }
  });
</script>

在一起：

<center-focusable>
    <focusable-element>
       This works.
    </focusable-element>
</center-focusable>

尽管这样处理似乎是不必要的努力。

Answer 2

<span> 是常规 HTML 元素，不是聚合物元素。 on-click 是一种聚合语法。我认为您应该使用常规 html 事件：onclick（无破折号）。例如：<span onclick="console.log('test')">I work</span>

如何在 Polymer 中的内容元素上设置点击事件侦听器？

How do I setup an on-click event listener on content elements in polymer?

polymer