click事件触发两次（不是jQuery）

Question

我写了一小段代码，应该在页面上切换报告框。 它是附加到2个元素的click事件的一个函数（嗯-我知道，解决方案是将此函数分成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事件有一个区别 - event.eventPhase （前2 ，后3 ）。

Answer 1

除了指向quirksmode之外，我真的不知道我应该写什么- 事件顺序 ......

这是因为JavaScript事件是由W3C定义的方式-他们泡起来，到时捕捉事件的元素下的DOM树。

所以，要么使用jQuery为你处理它，要么使用e.stopPropagation()或（如Sheikh所说） window.event.cancelBubble = true 。