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（第一个2，第二个3）。

Answer 1

除了指向quirksmode - events order ...

之外，我真的不知道我应该写什么

这是因为W3C定义了javascript事件的方式 - 他们将 向上和向下追溯到捕获事件的元素的DOM树。

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

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

1 个答案: