提前致歉，但我对 Polymer 完全是菜鸟。
到目前为止，我已经完成了一个 HTML 文件(被视为外部对话框)，其中包含一些内容。
首先，用户单击主页上的按钮，然后显示一个对话框。用户将在对话框中输入文本(此时可以输入任何内容)，然后单击提交按钮。此时，要么成功，要么如果文本框为空，则抛出错误，选择文本框，并且(如果可能)变成红色/显示错误消息。
不幸的是，我连 polymer 事件都无法解决。
这是我到目前为止的代码:
主页(工作正常):
<!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>
那里有一个按钮“立即购买”，它以弹出对话框形式调用以下代码:
<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>
根据我的在线搜索，要获得按钮来检查单击时文本框是否为空，我首先需要一个 eventHandler。我知道我应该放这样的东西:
on-click="confirmClick"
在 <paper-button dialog-confirm>Submit</paper-button> .
大概在<script>中部分，这个:
Polymer('my-element', {
confirmClick: function() {
alert('Click event triggered');
});
但考虑到我已经有了这个:
Polymer({
is: "accountability-ticket"
});
以上，以及到目前为止我尝试输入的 confimClick这会导致当用户单击“立即购买”时整个对话框不会出现，我不知道该怎么做。
现在，我该如何设置点击事件？谢谢。
最佳答案
要注册事件处理程序，请删除双大括号。
<paper-button on-click="confirmClick">Confirm</paper-button>
更新
感谢您的更新。我现在意识到您正在尝试在 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
}
更新
另一方面，如果您位于 Polymer 元素内，则可以将事件处理程序添加到原型(prototype)中。 id在 dom-module处理程序的注册位置必须与 is 匹配原型(prototype)中的属性(在本例中为责任票)。因此，假设您的模块如下所示:
<dom-module id="accountability-ticket">
<template>
<paper-button on-click="confirmClick">Confirm</paper-button>
</template>
</dom-module>
您可以通过以下方式将处理程序添加到原型(prototype):
<script>
Polymer({
is: "accountability-ticket",
confirmClick: function(event){
console.log(event);
}
});
</script>>
关于javascript - 如何为基于 polymer 的网页创建点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32223757/