javascript 不触发聚合物点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25226917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Polymer click event is not fired
提问by Cilenco
At the moment I'm trying my first steps with Polymer. Now I have a simple page with a paper-button on it but I can't register a click event for it. I tried with this code:
目前，我正在尝试使用 Polymer 迈出的第一步。现在我有一个简单的页面，上面有一个纸质按钮，但我无法为它注册点击事件。我尝试使用此代码：
<paper-button raisedButton
id="test"
class="colored"
label="Click"
link="http://twitter.com"
on-click="{{ goLink }}">
</paper-button>
<script>
Polymer('#test', {
goLink: function(e)
{
window.location.href = e.target.getAttribute('link');
}
});
</script>
The click event is not fired. What is wrong with the code? And second question: Should I use on-clickor on-tabin my code?
点击事件不会被触发。代码有什么问题？第二个问题：我应该在我的代码中使用on-click或on-tab吗？
回答by Dirk Grappendorf
You cannot define a Polymer component by simply calling the Polymer()function with the id of some arbitrary element. Either you need to create a Polymer elementthat contains the button and the handler code like so:
您不能通过简单地Polymer()使用某个任意元素的 id调用函数来定义 Polymer 组件。您需要创建一个包含按钮和处理程序代码的 Polymer 元素，如下所示：
<body unresolved>
<polymer-element name="link-button">
<template>
<paper-button raisedButton id="test" class="colored"
label="Click" link="http://twitter.com"
on-click="{{ goLink }}">
</paper-button>
</template>
<script>
Polymer('link-button', {
goLink: function(e) {
window.location.href = e.target.getAttribute('link');
}
})
</script>
</polymer-element>
<link-button></link-button>
</body>
or you need to wrap the button in an auto-binding template:
或者您需要将按钮包装在自动绑定模板中：
<body unresolved>
<template id="bind" is="auto-binding">
<paper-button raisedButton id="test" class="colored"
label="Click" link="http://twitter.com"
on-click="{{ goLink }}">
</paper-button>
</template>
<script>
var bind = document.querySelector('#bind');
bind.goLink = function(e) {
window.location.href = e.target.getAttribute('link');
}
</script>
</body>
With the first version, you can create a reusable link-buttonelement if you convert the hard-coded link (and maybe some other values) into attributes.
在第一个版本中，link-button如果将硬编码链接（可能还有一些其他值）转换为属性，则可以创建可重用元素。
And btw. you can use 'on-tap' or 'on-click'. Both events are fired when you click the button with the mouse.
顺便说一句。您可以使用“点击”或“点击”。当您用鼠标单击按钮时，这两个事件都会被触发。
Edit:
编辑：
If all you want is the fancy paper button, you could go without any Polymer specific programming by simply adding an event listener to the element:
如果你想要的只是漂亮的纸按钮，你可以不用任何 Polymer 特定的编程，只需向元素添加一个事件侦听器：
<paper-button raisedButton id="test" class="colored"
label="Click" link="http://twitter.com">
</paper-button>
<script>
document.querySelector('#test').addEventListener('click', function(e) {
window.location.href = e.target.getAttribute('link');
})
</script>
But i think you miss a lot of the power of Polymer (and web components in general) if you only focus on the component-consumer-side of it.
但是我认为如果您只关注它的组件消费者端，您就会错过 Polymer（以及一般的 Web 组件）的很多功能。
回答by Vinícius A. Jorge
I know it is an old thread, but because more people can get here, like me, see below the right and updated answer, Polymer 1.x compatible (Dirk Grappendorf's answer was pretty right BUT is OUTDATED):
我知道这是一个旧线程，但是因为更多的人可以像我一样到达这里，请参阅下面正确和更新的答案，Polymer 1.x 兼容（Dirk Grappendorf 的答案非常正确，但已过时）：
To create a Polymer element:
要创建 Polymer 元素：
<dom-module id="module-name">
<style>
Enter your CSS style here
</style>
<template>
<paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
</template>
<script>
Polymer({
is: 'module-name',
goLink: function(e) {
window.location.href = e.target.getAttribute('link');
}
});
</script>
</dom-module>
To create an auto-binding template:
创建自动绑定模板：
<template id="bind" is="dom-bind">
<paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
</template>
<script>
var bind = document.querySelector('#bind');
bind.goLink = function(e) {
window.location.href = e.target.getAttribute('link');
};
</script>
Or using listeners:
或者使用监听器：
<paper-button raisedButton id="test" link="http://twitter.com">Click</paper-button>
<script>
var button = document.getElementById('test');
button.addEventListener('tap', function(e) {
window.location.href = e.target.getAttribute('link');
});
</script>
Paper-icon-button and paper-fab work exactly this same way.
Paper-icon-button 和 paper-fab 的工作方式完全相同。
What to choose? I would choose create an element if I am going to reuse this button across more projects, or in other parts at the same project; auto-binding if I'm not going to reuse this code but my interface has many events to handle (it is easier to encapsulate the whole UI in one dom-bind template and create all the handlers necessary using bind.handlerName syntax than create listeners to all UI elements that trigger events - and one listener for each event the same element triggers). And the thid option, listeners, only if what I want cannot be accomplished by the other options (like when you fire custom events) or there is just 1 or 2 events to be triggered in the page (in this case, the code seems shorter than the other options).
选择什么？如果我要在更多项目或同一项目的其他部分重复使用此按钮，我会选择创建一个元素；如果我不打算重用此代码但我的界面有许多事件要处理，则自动绑定（将整个 UI 封装在一个 dom-bind 模板中并使用 bind.handlerName 语法创建所有必要的处理程序比创建侦听器更容易触发事件的所有 UI 元素 - 以及每个事件的一个侦听器，相同的元素触发）。第一个选项，侦听器，仅当其他选项无法完成我想要的操作时（例如触发自定义事件时），或者页面中仅触发 1 或 2 个事件（在这种情况下，代码似乎更短）比其他选项）。
回答by Steven Spungin
For Polymer 2, you would do this:
对于聚合物 2，您将执行以下操作：
<dom-bind id='top'>
<template>
<paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
</template>
</dom-bind>
<script>
const bind = document.getElementById('top');
bind.goLink = ()=>{ }
</script>
Your template is immediately stamped, and all data bindings are relative to the dom bind element.
您的模板会立即被标记，并且所有数据绑定都与 dom 绑定元素相关。
Then you could even add 2 way bindings, etc such as:
然后您甚至可以添加 2 路绑定等，例如：
<dom-bind id='top'>
<template>
<paper-button raisedButton id="test" link="[[url]]" on-tap="goLink">[[display]]</paper-button>
</template>
</dom-bind>
<script>
const bind = document.getElementById('top');
bind.goLink = ()=>{ }
bind.url = 'http://twitter.com'
bind.display = 'Click'
</script>
See https://www.polymer-project.org/2.0/docs/devguide/templates#dom-bind
见https://www.polymer-project.org/2.0/docs/devguide/templates#dom-bind
Or for a quick and dirty solution, you could simply use a global event handler (not the best idea though...).
或者对于快速而肮脏的解决方案，您可以简单地使用全局事件处理程序（虽然不是最好的主意......）。
<paper-button raisedButton id="test" link="http://twitter.com" onclick="goLink()">Click</paper-button>
<script>
window.goLink = ()=>{}
</script>
