如何有条件地阻止与香草JS相同的元素的事件处理程序？

Question

我正在使用外部第三方脚本，它将事件处理程序（例如onclick）绑定到HTML元素。在我的脚本中，我想控制它是否触发，具体取决于我的事件处理程序中相同元素的条件。我试过event.stopImmediatePropagation()，但没有奏效。我如何使用vanilla 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>