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

Question

I have a little weird situation. I need to perform a click event (intercept), here is my case. By default element (div) are removed from the DOM, that means that div only appears when the user clicks the button, below is an image of that button

When the user clicks the button, content appears, image below:

What am trying to achieve?

Am trying to achieve this, when users click the button I want to add style to one div that appears, I simulate that on the image below:

So far my code looks like this:

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";
        }
      });
  }

But this doesn't work, can anybody try to help me with this?

Answer 1

@cloned already gave a good hint IMHO. Overriding the stylesheet would be the cleanest way to achieve this, since you want all images to be affected anyway.

With H5P, you have multiple options now that all have their pros and cons.

Patching

You can patch the code for instance. Then all you'd have to do is to add

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

at https://github.com/h5p/h5p-image-hotspots/blob/master/styles/image-hotspots.css#L303 on your system. However, whenever you update the H5P Image Hotspot content type, those changed would have to be re-applied since the official code would override them.

Forking

You could do the same in a fork, meaning you'd have to clone the complete content library files and change the machineName in library.json ( https://github.com/h5p/h5p-image-hotspots/blob/master/library.json#L10 ) and the occurrences in the code itself (it's the class name as well). The downside here is that you'd have to merge updates of the original codes to your fork if you want to benefit from bugfixes or new features.

Hooking

Luckily, H5P offers hooks to add scripts or to alter the stylesheets which is described at https://h5p.org/documentation/for-developers/visual-changes You will have to choose the proper plugin for your host system (eg WordPress, Drupal or moodle - the native core version of moodle 3.8+ doesn't feature hooks unfortunately, only the H5P plugin does), implement the alter_styles function to load your CSS file (see examples at https://h5p.org/documentation/for-developers/visual-changes ) and then put the aforementioned CSS to that file. Now, whenever H5P loads content, it will use your stylesheet to override its own without the need to touch the original H5P code, so you can benefit from updates while not having to re-apply patches.