バニラJSで同じ要素のイベントハンドラを条件付きでブロックする方法は？

Question

外部のサードパーティスクリプトを使用しています。これは、イベントハンドラ（たとえば、onclick）をHTML要素にバインドします。私のスクリプトでは、同じ要素に対するイベントハンドラの条件によって、発生するかどうかを制御したいと考えています。私はevent.stopImmediatePropagation()を試しましたが、うまくいきませんでした。バニラJSを使ってどうすればいいですか？

Example on JSBin

：上記のコードで

<script> //third-party script, cannot edit 
document.getElementById('test').addEventListener('click', function (e) { 
    alert('clicked'); 
}); 
</script> 
<script> //my script, can edit 
document.getElementById('test').addEventListener('click', function (e) { 
    if (document.getElementById('block').checked) { 
    //block click event from third-party script 
    } 
}); 
</script> 

、alert('clicked')は単なる一例です。実際には、イベントハンドラに貼り付けることができない複雑なロジックがたくさんあります。

Answer 1

私は回避策を見つけました。必要な要素をすべてカバーする子要素を動的に作成し、それにイベントハンドラをバインドしました。これを参照してくださいexample on JSBin：

<script> //my script, can edit 
var inner = document.createElement('div'); 
inner.style.position = 'absolute'; 
inner.style.top = '0'; 
inner.style.bottom = '0'; 
inner.style.left = '0'; 
inner.style.right = '0'; 
inner.addEventListener('click', function (e) { 
    if (document.getElementById('block').checked) { 
    e.stopImmediatePropagation(); 
    } 
}); 
var test = document.getElementById('test'); 
test.style.position = 'relative'; 
test.appendChild(inner); 
</script>