使用聚合物的路由事件
使用聚合物的路由事件
提问于 2013-10-01 12:07:42
我正在尝试用polymer包装一个按钮。
HTML：
<polymer-element name="sp-button" attributes="active">
<template>
<link rel="stylesheet" href="sp-button.css">
<button type="button"><content></content></button>
</template>
<script src="sp-button.js"></script>
</polymer-element>JS：
Polymer('sp-button', {
active: false,
activeChanged: function() {
console.log('active ' + this.active);
}
});我不确定如何允许聚合物元件用户收听点击事件或悬停事件。而且，在两个按钮被包裹在该聚合物元件中的情况下。
回答 3
Stack Overflow用户
发布于 2013-10-01 22:12:04
element的用户可以像设置任何普通HTML元素一样设置侦听器：
var button = document.querySelector('sp-button');
button.addEventListener('click', function(e) {
alert('from outside');
}); 在聚合物元素中，您还可以使用on-click捕获按钮上的单击事件，对其执行一些有趣的操作，和/或激发另一个事件：
<button on-click="clickHandler"><content>Button text</content></button>
...
clickHandler: function(e, detail, sender) {
alert('from inside');
this.fire('insideclick', {msg: 'from inside'});
}完整演示：http://jsbin.com/uqubAGO/1/edit
Stack Overflow用户
发布于 2013-10-02 01:01:27
两个按钮的案例看起来像这样：
<polymer-element name="sp-button" attributes="active">
<template>
<link rel="stylesheet" href="sp-button.css">
<button type="button" on-click="onSendClick">Send</button>
<button type="button" on-click="onReceiveClick">Receive</button>
</template>
<script src="sp-button.js"></script>
</polymer-element>JS：
Polymer('sp-button', {
//...
onSendClick: function() {
this.fire('send');
},
onReceiveClick: function() {
this.fire('receive');
}
});然后，您可以使用addEventListener从外部侦听这些特定于域的事件：
var button = document.querySelector('sp-button');
button.addEventListener('send', function(e) {
//...
});
button.addEventListener('receive', function(e) {
//...
});此方法的好处是，它隐藏了用户单击按钮导致send事件发生时的实现细节。对于sp-button元素的用户而言，它可能是按钮单击、下拉选择、鼠标悬停或任何数量的事件造成的。用户所关心的就是您的公共API:当您的元素希望外部世界采取相应的操作时，它将触发一个send事件和一个receive事件。
Stack Overflow用户
发布于 2013-10-04 20:24:03
如果您要捕获单击事件并发送新的内容，则可能需要停止单击事件的传播。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19107793
复制相关文章
相似问题
腾讯云开发者
