0

我正在尝试在 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');

这只是我想象的代码应该是什么样子的一个说明（我确信这段代码一点都不好），但我真的需要一些关于以下方面的帮助：

  1. 由于添加新事件会不断更改“this”的范围，我应该如何保持对类实例和被单击元素的引用？

  2. 我应该如何修改类，以免在初始化方法中包含整个代码？我试图为每个事件处理程序创建单独的方法，但结果我对“this”的范围感到困惑，绑定并试图将所有这些放在一起真的让我很恼火，但我想掌握这些知识.

  3. 在类中添加嵌套事件处理程序时如何跟踪“this”的范围？老实说，我用谷歌搜索并寻找答案，但无济于事。

谢谢！

4

1 回答 1

2

范围，选择 - 多次询问 - 在此处搜索[mootools]scope this：

Mootools 类变量范围

mootools 变量范围

Mootools - 绑定到类实例并访问事件对象

回顾一下：

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