为什么我在单个事件上执行多个

why am I getting multiple executions on a single event?

本文关键字：执行 事件 单个 为什么      更新时间：2023-09-26

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

我正在尝试从"选择器"更改列表中的元素。

脚本在执行

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

在这里更容易理解我在实践中的意思：http://jsfiddle.net/Zbdt3/1/

$$('.edit').each(function(el) {
    el.addEvent('click',function() {
        $$('#picker span').each(function(im) {
            im.addEvent('dblclick',function() {
                el.getParent().getElement('p').set('text',im.get('text'));
                console.log(im.get('text'));
            });
        });
    });
});
<ul>
<li><p>X</p><span class="edit">edit</span></li>
<li><p>Y</p><span class="edit">edit</span></li>
<li><p>Z</p><span class="edit">edit</span></li>
</ul>
<div id="picker">
<span>A</span>
<span>B</span>
<span>C</span>
</div>

因为每次点击 .edit 时都会在 #picked 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');
    });
});

下面是更新的示例 http://jsfiddle.net/hQqh6/

首先循环访问所有.edit元素并将事件附加到每个元素。

在每个元素的事件处理程序中，循环访问每个 #picker span 元素，并为每个元素附加另一个事件处理程序。

这样，每次触发.edit元素的事件处理程序时，您都会为#picker span元素附加其他事件处理程序，然后将它们堆叠起来。当#picker span上的事件被触发时，所有的地狱都松动了......

因为您是按$$('.edit')选择的，并且此选择器将返回集合（您有3元素class="edit"），通过这些集合，您正在执行.each(function(el) ...并为每个元素分配el.addEvent('click',function() ...（单击事件）。在此事件处理程序中.edit每次触发事件时，您都会为 #picker span 分配新的事件处理程序。结果触发了多个事件，并且"某处"失败。

注意：如@Tadeck所述，通过.each()（以逐个方式）按顺序分配事件不是很有效。这可以通过选择器完成。

相关文章：