JSFiddle - React, Tailwind, and code Playground

by Chris Dennis

HTML

<figure id="fig1" data-lightbox=x>
  <img id="img1" src="https://picsum.photos/200/150">
</figure>
<figure id="fig2" data-lightbox=x>
  <img id="img2" src="https://picsum.photos/200/150">
</figure>

JavaScript

function docReady(fn) {
  // see if DOM is already available
  if (document.readyState === "complete" || document.readyState === "interactive") {
    // call on next available tick
    setTimeout(fn, 1);
  } else {
    document.addEventListener("DOMContentLoaded", fn);
  }
}

docReady(function() {
  const matches = document.querySelectorAll("[data-lightbox]");
  matches.forEach(function(match) {
    //const fig1 = document.getElementById('fig1');
    match.addEventListener('touchstart', function(e) {
      alert("touch started");
    }, true); // true -- usecapture
    match.addEventListener('click', function(e) {
      alert("clicked");
    }, false); // true -- usecapture
  });
});