Question

我正在尝试在Mootools类中定义一个单击处理程序。我的处理程序假定打开一个链接块，每个链接都应该“装备”自己的点击处理程序，这应该触发链接特定的操作。我的意思是让我假设我有以下HTML代码：

<div id="wrapper">
  <a href="#" id="header">open options</a>
  <div class="optionsBlock" style="display:none">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

然后我试图在Mootools中定义这样的类：

var myHandler = new Class({
  Implements : [Events],
  initialize : function(element){
    this.element = document.id(element);
    this.elements = this.element.getChildren('a');
    this.elements.addEvents('click', function(ev){
      ev.preventDefault();
      //'this' as a reference to the current element in the array, which is being clicked, correct?
      this.getSibling('div.optionsBlock').setStyle('display', 'block');
      var parentLink = this;
      this.getSibling('div.optionsBlock').getChildren('a').addEvent('click', function(e){
        e.preventDefault();
      //should append the text of currently clicked link into the parent link
        parentLink.appendText(this.get('text'))
      });
    });
  }
});
new myHandler('wrapper');

这只是我可以想象代码应该是什么样的例子（我确信这段代码根本不好），但我真的需要一些关于以下内容的帮助：

由于添加新事件会不断改变“this”的范围，我应该如何保持对类实例和被点击元素的引用？
如何修改类以便不将整个代码放在initialize方法中？我试图为每个事件处理程序创建单独的方法，但结果我对'this'的范围感到困惑，绑定并尝试将所有这些放在一起真的让我烦恼，但我想掌握这些知识
如何在类中添加嵌套事件处理程序时跟踪“this”的范围？老实说，我用Google搜索并搜索了答案，但无济于事。

谢谢！

Answer 1

范围，随意挑选 - 多次询问 - 在此搜索[mootools]scope this：

Mootools class variable scope

mootools variable scope

Mootools - Bind to class instance and access event object

回顾：

使用已保存的引用var self = this;，然后引用self.prop或使用fn.bind模式
添加更多方法。遵循单一责任原则。例如，在您的班级中，创建attachEvents: function() {}并初始化调用。
使用保存的参考模式。您可以通过委派事件来修复它，而不是在父点击上创建新的事件回调。

范围＆＃39;这个＆＃39;在mootools类里面

1 个答案: