这几周我开始使用 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 上什么也不会发生。
你能帮帮我吗?
最佳答案
还有另一种方法:Declarative event mapping
<paper-button id="button" on-click="{{click_submit}}" ...
click_submit: function () {
var submit = this.$['submit-button'];
submit.click();
}
关于javascript - Polymer 不允许在 Chrome 中设置内部元素的样式和传播事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29402104/