clickイベントが2回発生する（jQueryではない）

Question

私は自分のページにレポートボックスを切り替えるべきである小さなコードを書いた。 2つの要素のclickイベントに1つの関数が追加されています（この関数を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つの発生イベントに1つの違いがあることがわかりました。event.eventPhase（最初の2、2番目の3）です。

Answer 1

私は本当に私がここにquirksmode - events orderに指示以外の書くべきかわからない...

それが原因でイベントがW3Cによって定義されたJavaScriptの方法である - 彼らはダウンアップバブルイベントをキャプチャする要素へのDOMツリー。

したがって、あなたのためにそれを処理するjQueryを使用するか、e.stopPropagation()または（シェイク氏のように）window.event.cancelBubble = trueを使用してください。