Javascript 为什么我会在一个事件上执行多次？

我的脚本显然有一个根本性的缺陷，尽管我看不出它是什么

我正在尝试将列表中的一个元素从“选择器”更改为“选择器”

脚本在执行一次时运行良好，但每次新执行时，它都会增加在每个事件上运行的次数

更容易理解我在实践中的意思：

$$（'.edit'）。每个（函数（el）{
el.addEvent（'单击'，函数（）{
$$（“#选择器范围”）。每个（函数（im）{
im.addEvent（'dblclick'，function（）{
el.getParent（）.getElement（'p'）.set（'text'，im.get（'text'））；
console.log（im.get（'text'））；
});
});
});
});

X
编辑
Y
编辑
Z
编辑

A.
B
C

因为您正在通过

$（'.edit'）

进行选择，并且此选择器将返回集合（您有

3个
元素，其中包含
class=“edit”
），通过该集合执行
。每个（函数（el）
，并为每个元素分配
el.addEvent（'click'，function（）…
（单击事件）。在此事件处理程序中，每次触发
.edit
事件时，您都会为
#picker span
分配新的事件处理程序。因此，会触发多个事件并“在某个地方”失败

注意：正如@Tadeck所提到的，通过
顺序分配事件。each（）
（以一个接一个的方式）不是很有效。它可以通过选择器来完成。
因为您是通过
$$（'.edit'）
进行选择的，而此选择器将返回集合（您有
3个
元素和
class=“edit”
）执行
。每个（函数（el）
，并为每个元素分配
el.addEvent（'click'，function（）…
（单击事件）。在此事件处理程序中，每次触发
。编辑
事件时，您都会为
选择器span
分配新的事件处理程序。因此，会触发多个事件并“某处”它失败了

注意：正如@Tadeck所提到的，通过
顺序分配事件。each（）
（以一种接一种的方式）不是很有效。可以通过选择器来完成。
首先遍历所有
。编辑
元素并将事件附加到每个元素

在每个元素的事件处理程序中，迭代每个
#picker span
元素，并为每个元素附加另一个事件处理程序

这样，每次触发
.edit
元素的事件处理程序时，您都会为
#picker span
元素附加额外的事件处理程序，并将它们堆叠起来。当触发
#picker span
上的事件时，所有的地狱都会松动…
您首先遍历所有
元素。edit
并附加事件给他们每个人

在每个元素的事件处理程序中，迭代每个
#picker span
元素，并为每个元素附加另一个事件处理程序

这样，每次触发
.edit
元素的事件处理程序时，您都会为
#picker span
元素附加额外的事件处理程序，这些事件处理程序就会堆积起来。当触发
#picker span
上的事件时，所有的麻烦都会散开…
因为在每个c上都会在
#picker span
上添加新的事件侦听器单击
。编辑
。您应该独立添加它们

var activeEl;

$$('.edit').each(function(el) {
    el.addEvent('click',function() {
        $('picker').setStyles({
            'display':'block'
        });
        activeEl = el;             
    });
});

$$('#picker span').each(function(im) {
    im.addEvent('dblclick',function() {        
        activeEl.getParent().getElement('p').set('text',im.get('text'));          
        console.log(im.get('text'));
        $('picker').setStyle('display','none');
    });
});

​
这里是更新的示例
，因为您在每次单击
时都会在
#拾取的span
上添加新的事件侦听器。编辑
。您应该独立添加它们

var activeEl;

$$('.edit').each(function(el) {
    el.addEvent('click',function() {
        $('picker').setStyles({
            'display':'block'
        });
        activeEl = el;             
    });
});

$$('#picker span').each(function(im) {
    im.addEvent('dblclick',function() {        
        activeEl.getParent().getElement('p').set('text',im.get('text'));          
        console.log(im.get('text'));
        $('picker').setStyle('display','none');
    });
});

​
这是更新后的示例
事实上，他正在一个接一个地附加事件。效率不高，但这并没有造成问题。@Tadeck，是的，没有抓住要点。我已经更正了我的答案。谢谢你提到这一点。还有一件事。我相信你犯了一个错误，为jQuery编写了代码。这是一个Mootools问题。Mootools是一个n
document.id
的别名，它不同于（更类似于jQuery的
$（）
函数）。此外，Mootools的元素没有
。click（）
方法（）.@Tadeck，完全错了。对不起。我还在睡觉，因为我对这个答案没有完全错，所以我会删除代码段。下次我会更加专心。@PaulTRawkeen:没问题。喝点咖啡；）事实上，他正在一个接一个地附加事件。效率不高，但这并没有造成问题。@Tadeck，是的，没有抓住重点。我已经更正了我的答案。谢谢你提到这一点。还有一件事。我相信你犯了一个错误，为jQuery编写了代码。这是一个Mootools问题。Mootools是
文档的别名.id
，它不同于（更类似于jQuery的
$（）
函数）。此外，Mootools的元素没有
。click（）
方法（）.@Tadeck，完全错了。对不起。我还在睡觉，我会删除代码段，因为我的回答没有完全错。下次我会更加注意。@PaulTRawkeen:没问题。喝点咖啡；）我们已经发现了问题，但你至少已经努力准备了工作示例：）无论如何，而不是全局（或非全局）变量我宁愿使用和元素方法来存储和检索数据。这样您甚至可以避免使用
activeEl.getParent（）.getElement（'p'）
每次触发选择器事件处理程序时，甚至可以进一步改进/缩短代码。我们已经发现了问题，但您至少已经努力准备了工作示例：）无论如何，而不是全局（或非全局）变量我宁愿使用和元素方法来存储和检索数据。这样，您甚至可以避免在每次触发选择器事件处理程序时使用
activeEl.getParent（）.getElement（'p'）
，甚至可以进一步改进/缩短代码。