javascript - 单击事件触发两次(不是 jQuery)

Question

我写了一小段代码来切换我页面上的报告框。这是附加到 2 个元素的单击事件的一个函数(好吧 - 我知道，解决方案是将此函数分成 2 个，但我想了解此函数的问题)。问题是在关闭时函数被触发了两次并且盒子不想消失。

function overlayInit() {
    var rep = document.createElement("div");
    rep.setAttribute('id','reportbug');
    document.body.appendChild(rep);
    toggleReporter();
}

function toggleReporter(ev) {
    var e = document.getElementById('reportbug');

    if(ev)
    {
        console.log(ev);
    }
    else
    {
        console.log('notarget');
    }

    if (e.hasClass('collapsed'))
    {
        console.log('Extending');
        e.removeClass('collapsed');
        e.addClass('expanded');
        e.removeEventListener('click',toggleReporter);

        e.innerHTML = 
            '<h5>Wyraź swoją opinię na temat tej strony</h5>'+
            '<button class="text" id="closeRep">[× zamknij]</button>'+
            '<form action="reportbug" method="post">'+
            '<textarea name="cont" style="width:100%;font:14px Verdana,sans-serif;height:100px;">'+
            '</textarea><br />'+
            '<input type="submit" value="Wyślij" />'+
            '</form>'
        ;

        // Double fired
        document.getElementById('closeRep').addEventListener('click',toggleReporter);
    }
    else
    {
        console.log('Collapsing');
        if ( e.hasClass('expanded') )
        {
            console.log('Removing events');
            e.removeClass('expanded');
            document.getElementById('closeRep').removeEventListener('click',toggleReporter);
        }
        e.addClass('collapsed');
        e.addEventListener('click',toggleReporter);
        e.innerHTML = 'Wyraź opinię';
    }
}

document.addEventListener("DOMContentLoaded", overlayInit, false);

问题出现在 Ubuntu 上的 FF10.0.2 上。

我发现 2 个触发的事件有一个区别 - event.eventPhase(第一个 2，第二个 3)。

Answer 1

除了指向quirksmode - events order，我真的不知道我应该在这里写什么...

这是由于 W3C 定义 javascript 事件的方式 - 它们冒泡和DOM 树向下到达捕获事件的元素。

因此，要么使用 jQuery 为您处理它，要么使用 e.stopPropagation() 或(如 Sheikh 所说)window.event.cancelBubble = true。