使用聚合物路由事件

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事件。