Question

I wrote small piece of code which should toggle reporting box on my page. It’s one function attached to click event of 2 elements (well – I know, the solution is to separate this function into 2, but I want to understand problem with this function). The problem is that at closing function is fired twice and box don’t want to disappear.

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);

Problem occurs on FF10.0.2 on Ubuntu.

I discovered that 2 fired events have one difference – event.eventPhase (first 2, second 3).

Answer 1

I really don’t know what I should write here other than directing to quirksmode – events order…

It is because of the way javascript events are defined by the W3C – they bubble up and down the DOM tree upon to the element that captures the event.

So, either use jQuery which handles it for you, or use e.stopPropagation() or (as Sheikh said) window.event.cancelBubble = true.