如何在聚合物内容元素上设置点击事件监听器？

问题描述：

我正在使用聚合物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>

这不可能吗？

我不知道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>

好像精力来处理，虽然这样的不必要的量。

答

<span>是一个普通的HTML元素，而不是聚合物元素。点击是一种聚合物语法。我认为你应该使用一个普通的html事件：onclick（没有短划线）。例如：<span onclick="console.log('test')">I work</span>

如何在聚合物内容元素上设置点击事件监听器？

相关推荐