访问同一元素内节点的侦听器回调内的元素方法

Question

我在访问已附加单击侦听器的节点回调中的 dom 内的方法时遇到问题，我不知道为什么。我已经尝试了以下方法。

下面是负责在回调中访问方法的代码段：

<dom-module id="my-view2">
  <template>
  ...html codes ... 
  </template> 
  <script> 
  Polymer({
    is: 'my-view2',
    ... properties, etc ...

 //******* trying to access a method *******************
   handleClick: function(e) {
     var btn = document.createElement("paper-button");
     btn.addEventListener("click", function() {
     var el = Polymer.dom(this).querySelector('#my-view2'); 
     el.methodToAccess();
   });
   }
  methodToAccess: function() {
    console.log('success'); 
  },
 }); 

我已经尝试了所有这些：

this.$$('#my-view2")
document.querySelector("#my-view2"); 
Polymer.dom(this.root).querySelector('#my-view2');
Polymer.dom(this).querySelector('#my-view2');
this.getElementById('my-view2'); 

它们都不起作用，并且都会导致无法读取 null 的属性"methodToAccess"。我做错了什么？

Answer 1

如果将回调函数绑定到当前this作用域，则可以直接访问methodToAccess。

handleClick: function(e) {
 var btn = document.createElement("paper-button");
 btn.addEventListener("click", function() {
   this.methodToAccess();
 }.bind(this));
}

话虽如此，您可能希望使用命令式添加/删除侦听器以聚合物方式执行此操作：

this.listen(this.$.myButton, 'tap', 'onTap');
this.unlisten(this.$.myButton, 'tap', 'onTap');

呵

呵