바닐라 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>