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

Question

我有一个有点奇怪的情况。 我需要执行一个点击事件（拦截），这是我的情况。 默认情况下，元素 (div) 从 DOM 中删除，这意味着 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";
        }
      });
  }

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

Answer 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 中的 machineName ( https://github.com/h5p/h5p-image-hotspots/blob/master/ library.json#L10 ）和代码本身中的出现（它也是类名）。 这里的缺点是，如果您想从错误修正或新功能中受益，您必须将原始代码的更新合并到您的分支中。

挂钩

幸运的是，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 代码，因此您可以从更新中受益，而无需重新应用补丁。