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>

如何使用vanilla JS有条件地阻止同一元素的事件处理程序？

1 个答案: