使用 JavaScript 拦截从 DOM 中移除的元素的点击事件答案

【问题标题】：Intercept click event on the element that is removed from the DOM with JavaScript使用 JavaScript 拦截从 DOM 中移除的元素的点击事件
【发布时间】：2020-11-10 09:44:26
【问题描述】：

我的情况有点奇怪。我需要执行一个点击事件（拦截），这是我的情况。默认情况下，从 DOM 中删除元素（div），这意味着 div 仅在用户单击按钮时出现，下面是该按钮的图像

当用户点击按钮时，出现内容，如下图：

想要达到什么目的？

我正在尝试实现这一点，当用户单击我想为出现的一个 div 添加样式的按钮时，我在下图中进行了模拟：

到目前为止，我的代码如下所示：

var buttons = document.querySelectorAll('button.h5p-image-hotspot');
  for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function(){
        var myNodelist = document.querySelectorAll('.h5p-image')
        var i;
        for (i = 0; i < myNodelist.length; i++) {
          myNodelist[i].style.width = "300px";
        }
      });
  }

但这不起作用，有人可以帮我解决这个问题吗？

【问题讨论】：

帮我澄清一些事情。 1.还有其他地方可以显示最初不可见的div的click事件吗？ 2.你不想在你的HTML代码中手动给div添加宽度？？
如果在您单击按钮时它不在 HTML 中，则无需拦截单击。您需要等到单击完成，然后才能应用样式。但是为什么不单独使用 CSS 呢？ CSS 可以为页面上的任何元素设置样式。

标签： javascript

【解决方案1】：

@cloned 已经给出了一个很好的提示恕我直言。覆盖样式表将是实现这一目标的最简洁方法，因为您希望所有图像都受到影响。

使用 H5P，您现在有多种选择，各有利弊。

打补丁

例如，您可以修补代码。那么你所要做的就是添加

.h5p-image-hotspot-popup-body-fraction.h5p-image {
    width: 300px;
}

https://github.com/h5p/h5p-image-hotspots/blob/master/styles/image-hotspots.css#L303 在您的系统上。但是，每当您更新 H5P Image Hotspot 内容类型时，都必须重新应用更改的内容，因为官方代码会覆盖它们。

分叉

您可以在 fork 中执行相同的操作，这意味着您必须克隆完整的内容库文件并更改 library.json (https://github.com/h5p/h5p-image-hotspots/blob/master/library.json#L10) 中的 machineName 以及代码本身中的出现（它的类名称为好）。这里的缺点是，如果您想从错误修复或新功能中受益，您必须将原始代码的更新合并到您的 fork。

挂钩

幸运的是，H5P 提供了添加脚本或更改样式表的钩子，如https://h5p.org/documentation/for-developers/visual-changes 所述，您必须为您的主机系统选择合适的插件（例如 WordPress、Drupal 或 moodle——moodle 3.8 的本机核心版本+ 不幸的是，没有钩子，只有 H5P 插件有），实现 alter_styles 函数来加载你的 CSS 文件（见https://h5p.org/documentation/for-developers/visual-changes 的例子），然后把前面提到的 CSS 放到那个文件中。现在，每当 H5P 加载内容时，它都会使用您的样式表来覆盖自己的样式表，而无需触及原始 H5P 代码，因此您可以从更新中受益，而无需重新应用补丁。

【讨论】：