The problem I’m trying to solve is, on a website when a user taps an image const portfolioImg = document.getElementsByClassName("fusion-image-element")[0].getElementsByTagName("img") which brings up the image in an overlay, a mobile version of the .click() method is called on an icon const portfolioImgFsBtn = document.getElementsByClassName("ilightbox-fullscreen");. In this case, I want to apply (mobile version of) the click() method on an element, as opposed to listening for a touch event on the element like addEventListener('touchstart').

Here’s my code:

const portfolioImg = document
  .getElementsByClassName("fusion-image-element")[0]
  .getElementsByTagName("img");

const portfolioImgFsBtn = document.getElementsByClassName(
  "ilightbox-fullscreen"
);

portfolioImg[0].addEventListener("click", function (e) {
  console.log("img clicked!!!");
});

function flagInsertedElement(event) {
  var el = event.target;
}
document.addEventListener("DOMNodeInserted", flagInsertedElement, false);

function onElementAvailable(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    if (document.querySelector(selector)) {
      observer.disconnect();
      callback();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

onElementAvailable(".ilightbox-fullscreen", () => {
  console.log("element available!!");
  console.log(portfolioImgFsBtn[0]);
  portfolioImgFsBtn[0].click();
});

It works on laptop, but not on phone. I’m aware the click() method is only for desktop/laptop so that’s expected. However, I haven’t found a mobile version of the click() method that works.

I searched through StackOverflow but haven’t found something that worked, as I would like to avoid jQuery (trigger() method) if possible. Thanks