如何在聚合物內容元素上設置點擊事件監聽器？

我正在使用聚合物0.8，據我瞭解有一個新的API，但我無法在任何地方找到對此問題的參考。我試圖做到這一點：如何在聚合物內容元素上設置點擊事件監聽器？

<center-focusable> 
    <template is="x-autobind"> 
     <span on-click="setFocus">test?</span> 
    </template> 
</center-focusable>

與錯誤了：

[跨度] [點擊進入]：事件處理[的setFocus]的範圍是（）

空

我的元素定義如下：

<dom-module id="center-focusable"> 
    <template> 
     <span on-click="setFocus">I work</span> 
     <content></content> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "center-focusable", 
     setFocus: function() { 
      console.log("test"); 
     } 
    }); 
</script>

這不可能嗎？

來源

2015-04-04 Kit Sunde

我不知道8.0但不會函數調用需要句柄？ on-click =「{{setFocus}}」 – 2015-04-04 20:16:40

@ jimidough10該API已更改：https://www.polymer-project.org/0.8/docs/migration.html#declarative-handlers – 2015-04-04 20:18:01

很有幫助。感謝鏈接我一直在想我在哪裏可以找到這個。 – 2015-04-04 20:22:29

我最終做的是定義另一個自定義元素，它會觸發一個自定義事件讓我捕捉。

<dom-module id="focusable-element"> 
    <content></content> 
</dom-module> 

<script> 
    Polymer({ 
    is: "focusable-element", 
    listeners: { 
     'click': 'setFocus' 
    }, 
    setFocus: function() { 
     this.fire("center-focusable:center"); 
    } 
    }); 
</script>

然後，我會抓住它：

<script> 
    Polymer({ 
    is: "center-focusable", 
    listeners: { 
     'center-focusable:center': 'setFocus' 
    }, 
    setFocus: function (e) { 
     e.stopPropagation(); 
     console.log("test"); 
    } 
    }); 
</script>

一起：

<center-focusable> 
    <focusable-element> 
     This works. 
    </focusable-element> 
</center-focusable>

好像精力來處理，雖然這樣的不必要的量。

來源

2015-04-04 21:02:03

-1

<span>是一個普通的HTML元素，而不是聚合物元素。點擊是一種聚合物語法。我認爲你應該使用一個普通的html事件：onclick（沒有短劃線）。例如：<span onclick="console.log('test')">I work</span>

來源

2015-04-06 12:37:59 BLASTOR

如何在聚合物內容元素上設置點擊事件監聽器？

回答

相關問題