событие click срабатывает дважды (не от jQuery) - PullRequest
Новая
       14

событие click срабатывает дважды (не от jQuery)

1 голос
/ 21 февраля 2012

Я написал небольшой фрагмент кода, который должен переключать окно отчетов на моей странице. Это одна функция, прикрепленная к событию click из 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);

Проблема возникает на FF10.0.2 в Ubuntu.

Я обнаружил, что у двух запущенных событий есть одно различие - event.eventPhase (первое 2, второе 3).

1 Ответ

3 голосов
/ 21 февраля 2012

Я действительно не знаю, что мне следует написать здесь, кроме указания на quirksmode - порядок событий ...

Это связано с тем, как W3C определяет события javascript - они bubble up и вниз по дереву DOM к элементу, который захватывает событие.

Итак, либо используйте jQuery, который его обрабатывает, либо используйте e.stopPropagation() или (как сказал Шейх) window.event.cancelBubble = true.

...