javascript函数调用两次

Question

我现在感到困惑和沮丧，来到这里寻找一些启示。

我正在使用此js函数：

jQuery('#elements_hidden .vign').on('click', function(e)
{
    var valid        = '/img/site/valid.png';
    var unvalid      = '/img/site/unvalid.png';
    var anchor       = jQuery(this).next('.valid');
    var anchor_block = jQuery(this);
    var list         = jQuery(this).parents('li').parents('ul').children('li');
    var state        = anchor.attr('src');

    console.log('state:' + state);

    jQuery(list).each(function(index, val)
    {
        jQuery(val).children('.valid').attr('src',unvalid);
        jQuery(val).children('.vign').attr('src',jQuery(val).children('.vign').attr('src').replace('on.png','off.png'));
    });

    if (anchor.attr('src') == unvalid)
    {
        anchor.attr('src',valid);
        anchor.siblings('.vign').attr('src', anchor.siblings('.vign').attr('src').replace('off.png','on.png'));

        if(state != unvalid)
        {
            anchor.attr('src',unvalid);
            anchor.siblings('.vign').attr('src',anchor.siblings('.vign').attr('src').replace('on.png','off.png'));
        }

    }
});

在这段标记上：

<!-- html markup -->
<div id="elements_hidden" style="z-index: 0">

<div class="moteur">
    <ul id="moteur">
            <li>
                <img data-optionCode="12" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
            <li>
                <img data-optionCode="2T" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
            <li>
                <img data-optionCode="4T" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
    </ul>
</div>

<div class="couleur">
        <ul id="couleur">
            <li>
                <img data-optionCode="0MP50NP5" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
            <li>
                <img data-optionCode="0MP60NP6" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
        </ul>
</div>

<div class="selle">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="jonc">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="retros">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="signature">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="rangement">
    <ul id="rangement">
            <ul>
                <li>
                    <img data-optionCode="DAKP7" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
                <li>
                    <img data-optionCode="DAKR1" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
            </ul>
            <ul>
                <li>
                    <img data-optionCode="DLU01" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
            </ul>
            <ul>
                <li>
                    <img data-optionCode="DPQ01" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
            </ul>

    </ul>
</div>

<div class="confort">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="perso">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

</div>

当用户单击具有类vign的任何元素时，该函数会触发两次，因为我在控制台日志中看到两行，而只有一次单击。

由于第二次将已更改为活动（有效）的图像设置为无效（无效），因此这一事实打破了此功能的目标。

周围有没有任何忍者可以解释为什么它会被触发两次，或者如果我对此感到困惑，为什么用户单击时图像永远不会改变。

我会感激的 感谢您的阅读时间。

最好的祝福

编辑：亲切的答复后添加信息

如果仅出于测试目的而将标记修改为向其中一个元素添加id的话，可以这样说：

<img id="moteur_vignette" data-optionCode="<?php echo $optionCode ?>" class="vign" src="<?php echo $this->basePath()?>/img/site/vign/vign_off.png" />

在div-> class-> moteur里面

我更改选择器以将功能附加到该click事件：

jQuery('#moteur_vignette').on('click', function(e) {
... 
}

按照说明进行操作，如果我很好理解，则不必两次触发它，但是可以。 所以我还是很困惑。

Answer 1

我认为您看到的事件是由两个不同的元素触发的。 你有一个类IMG vign包裹带班一个div #elements_hidden 。 因此，如果您单击内部元素并且不阻止事件起泡，则事件最终将冒泡到外部元素。 由于您在jquery查询中同时使用了这两个类，因此单击处理程序将附加到这两个类上。

这样的问题的解释： 什么是事件冒泡和捕获？