javascript 如何为基于聚合物的网页创建点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32223757/
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
How to create a click event for polymer-based webpage
提问by zack_falcon
Apologies in advanced, but I'm a complete noob at Polymer.
提前道歉，但我完全是 Polymer 的菜鸟。
So far I've done an HTML file (treated as external dialog box), with some stuff in it.
到目前为止，我已经完成了一个 HTML 文件（被视为外部对话框），其中包含一些内容。
First off, the user clicks a button from the main page, which then displays a dialog box. From the dialog box, the user will type in text (at this point, anything), and then click on the submit button. At which point, either it succeeds, or if the textbox is empty, an error is thrown, the textbox is selected, and (if possible) turns red / displays an error message.
首先，用户单击主页上的一个按钮，然后显示一个对话框。从对话框中，用户将输入文本（此时可以输入任何内容），然后单击提交按钮。此时，要么成功，要么如果文本框为空，则抛出错误，选择文本框，并且（如果可能）变为红色/显示错误消息。
Unfortunately, even getting the polymer event down escapes me.
不幸的是，即使让聚合物事件下来，我也逃不过。
Here's my code so far:
到目前为止，这是我的代码：
The main page (works fine):
主页（工作正常）：
<!DOCTYPE HTML>
<html>
<head>
<link rel="import" href="elements/accountability-ticket.html"/>
</head>
<body>
<section>
<paper-button raised label="Buy Now" id="ticket" onclick="clickHandler('diagTicket')">Buy Now</paper-button>
</section>
<section><accountability-ticket></accountability-ticket></section>
<script>
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
console.log('Components are ready');
});
function clickHandler(e) {
var dialog = document.getElementById(e);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html>
There's a button there, "Buy Now", which calls the below code as a pop-up dialog form:
那里有一个按钮“立即购买”，它将以下代码作为弹出对话框调用：
<dom-module id="accountability-ticket">
<template>
<paper-dialog with-backdrop entry-animation="scale-up-animation"
exit-animation="fade-out-animation" id="diagTicket">
<h2>I Own It Ticket </h2>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Submit</paper-button>
</div>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "accountability-ticket"
});
</script>
According to my searches online, to get the button to check if the textbox is empty on click, I'll need an eventHandler first and foremost. I understand I'm supposed to put something like this:
根据我在网上的搜索，要让按钮在点击时检查文本框是否为空，我首先需要一个 eventHandler。我明白我应该这样写：
on-click="confirmClick"
in the <paper-button dialog-confirm>Submit</paper-button>.
在<paper-button dialog-confirm>Submit</paper-button>.
And presumably in the <script>part, this:
大概在这<script>部分，这个：
Polymer('my-element', {
confirmClick: function() {
alert('Click event triggered');
});
But given that I already have this:
但鉴于我已经有了这个：
Polymer({
is: "accountability-ticket"
});
above, and so far my attempts at putting confimClickin it results in the entire dialog box not appearing when the user clicks the "Buy Now", I'm not sure what to do.
以上，到目前为止，我尝试放入confimClick它导致当用户单击“立即购买”时整个对话框没有出现，我不知道该怎么做。
For now, how do I setup the click event? Thanks.
现在，我如何设置点击事件？谢谢。
回答by Maria
To register event handlers, remove the double braces.
要注册事件处理程序，请删除双括号。
<paper-button on-click="confirmClick">Confirm</paper-button>
Update
更新
Thanks for the update. I now realise that you are trying to set up the click handler on your main page outside of a Polymer element. The syntax above only works inside <dom-module>. You can however use the "traditional" approach for setting up event handlers.
感谢更新。我现在意识到您正试图在 Polymer 元素之外的主页上设置点击处理程序。上面的语法只适用于<dom-module>. 但是，您可以使用“传统”方法来设置事件处理程序。
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
document.querySelector("#ticket").addEventListener("click", clickHandler);
});
function clickHandler(e) {
// your code here
}
Update
更新
If on the other hand you are inside a Polymer element, you can add the event handler to the prototype. The idin the dom-modulewhere the handler is registered must match the isproperty in the prototype (in this case accountability-ticket). So assuming that your module looks like this:
另一方面，如果您在 Polymer 元素中，则可以将事件处理程序添加到原型中。将id在dom-module其中处理程序注册必须在比赛is中的原型属性（在这种情况下，问责制票）。因此假设您的模块如下所示：
<dom-module id="accountability-ticket">
<template>
<paper-button on-click="confirmClick">Confirm</paper-button>
</template>
</dom-module>
You add the handler to the prototype in the following way:
您可以通过以下方式将处理程序添加到原型中：
<script>
Polymer({
is: "accountability-ticket",
confirmClick: function(event){
console.log(event);
}
});
</script>>
回答by Steven Spungin
Outside of a component, you can do this declaratively using standard Javascript.
在组件之外，您可以使用标准 Javascript 以声明方式执行此操作。
- Use onclick instead of on-click. That will register a standard dom listener.
- Use standard inline javascript to call your method.
- 使用 onclick 而不是 on-click。这将注册一个标准的 dom 侦听器。
- 使用标准的内联 javascript 来调用您的方法。
<paper-button onclick="confirmClick()">Confirm</paper-button>
<script>
function confirmClick(e) {}
</script>You can also inline your code instead of calling a global method if that suits your needs.
如果适合您的需要，您还可以内联您的代码而不是调用全局方法。
<paper-button onclick="document.getElementById('drawer').open()">Open Drawer</paper-button>