javascript - Polymer 不允许在 Chrome 中设置内部元素的样式和传播事件

Question

这几周我开始使用 Polymer。我正在尝试创建一个 paper-submit 元素，其中包含一个按钮和一个 paper-button，一旦按下，就会触发隐藏按钮的点击事件。

这在 Firefox 中工作正常:paper-button 得到正确的样式(使用类)并且点击事件触发按钮的点击事件并且包含表单触发提交表单。

虽然在 Chrome 上，纸质按钮忽略了我设置的样式(参见示例:无背景颜色变化)并且它似乎停止传播按钮的点击事件。结果是一个无样式的纸质按钮，不会触发任何内容。

这是来源:

CSS样式，链接在主页面:

paper-button.blue {
  color: #FFFFFF;
  background-color: #2196F3; }

paper-submit polymer 元素:

<link href="../polymer/polymer.html" rel="import">
<link href="../paper-button/paper-button.html" rel="import">

<polymer-element name="paper-submit" attributes="bClass raised recenteringTouch fill" role="button">
  <template>
    <style>
      #submit-button {
        display: none;
      }
    </style>
    <paper-button id="button" class="{{bClass}}" raised="{{raised}}" recenteringTouch="{{recenteringTouch}}" role="button">
      <content></content>
    </paper-button>

    <button type="submit" id="submit-button"></button>
  </template>
  <script>
    Polymer({
      publish: {
        bClass: '',
        raised: false,
        recenteringTouch: false,
        fill: true
      },

      ready: function () {
        var submit = this.$['submit-button'];
        var button = this.$.button;
        button.addEventListener('click', function (ev) {
          submit.click();
        });
      }
    });
  </script>
</polymer-element>

注意:我已经尝试在 paper-input 元素中插入一个简单的按钮来测试它是否与 JavaScript 的点击功能相关，但它不是:相同的结果。

我是这样称呼元素的:

<paper-submit bClass="blue" role="button" tabindex="0">Click me!</paper-submit>

该元素位于带有一些必填字段的表单内:在 Firefox 上它们会触发错误，在 Chrome 上什么也不会发生。

你能帮帮我吗？

Answer 1

还有另一种方法:Declarative event mapping

<paper-button id="button" on-click="{{click_submit}}" ...

  click_submit: function () {
    var submit = this.$['submit-button'];
      submit.click();
  }