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

【问题标题】：Accessing a method of element inside a callback of listener for a node inside the same element访问同一元素内节点的侦听器回调内的元素方法
【发布时间】：2017-08-28 10:53:03
【问题描述】：

我在访问节点回调中的 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”。我做错了什么？

【问题讨论】：

标签： javascript jquery html jquery-selectors polymer

【解决方案1】：

如果您将回调函数绑定到当前的this 范围，您将可以直接访问methodToAccess。

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

话虽如此，您可能希望使用imperative add/remove listeners 以聚合物方式进行操作：

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

HTH

【讨论】：