使用聚合物路由事件

Question

我试图用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); 
    } 
}); 

我不知道如何允许聚合物元件的用户收听点击事件或悬停事件。此外，在两个按钮被包裹在该聚合物元件中的情况下。你的元素的

Answer 1

用户可以设置监听器就像任何普通的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

Answer 2

的两个按钮的情况下，看起来会是LIK E本：

<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) { 
    //... 
}); 

这种方法的好处是，它隐藏了用户单击按钮导致发生事件的实现细节。就sp-button元素的用户而言，它可能是按钮点击，下拉选择，鼠标悬停或任何导致它的事情。所有用户关心的是您的公共API：您的元素将在需要外部世界采取相应操作时触发send事件和receive事件。

Answer 3

如果您要捕捉并发送新内容，您可能需要停止传播click事件。