Clicking/tapping on a picture does not work on mobile devices

Question

I make a custom card, where the user enters his data on top of it and adds a photo. For photos I use KonvaJS and the resize functionality. I added a layer to the card and I need to make sure that when you click outside the card, the markers that need to be pulled are hidden. Everything works on desktop, but not on mobile devices. When I display e.target in the console on a desktop, the click is constantly on the canvas, but on phones it does not respond at all. Used click and tap. How can this be fixed? I tried stage.on("click) but no result

const stage = new Konva.Stage({
  container: "photoField",
  width: stageWidth,
  height: stageHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

function getCrop(image, size, clipPosition = "center-middle") {
  const width = size.width;
  const height = size.height;
  const aspectRatio = width / height;

  let newWidth;
  let newHeight;

  const imageRatio = image.width / image.height;

  if (aspectRatio >= imageRatio) {
    newWidth = image.width;
    newHeight = image.width / aspectRatio;
  } else {
    newWidth = image.height * aspectRatio;
    newHeight = image.height;
  }

  let x = 0;
  let y = 0;
  if (clipPosition === "left-top") {
    x = 0;
    y = 0;
  } else if (clipPosition === "left-middle") {
    x = 0;
    y = (image.height - newHeight) / 2;
  } else if (clipPosition === "left-bottom") {
    x = 0;
    y = image.height - newHeight;
  } else if (clipPosition === "center-top") {
    x = (image.width - newWidth) / 2;
    y = 0;
  } else if (clipPosition === "center-middle") {
    x = (image.width - newWidth) / 2;
    y = (image.height - newHeight) / 2;
  } else if (clipPosition === "center-bottom") {
    x = (image.width - newWidth) / 2;
    y = image.height - newHeight;
  } else if (clipPosition === "right-top") {
    x = image.width - newWidth;
    y = 0;
  } else if (clipPosition === "right-middle") {
    x = image.width - newWidth;
    y = (image.height - newHeight) / 2;
  } else if (clipPosition === "right-bottom") {
    x = image.width - newWidth;
    y = image.height - newHeight;
  } else if (clipPosition === "scale") {
    x = 0;
    y = 0;
    newWidth = width;
    newHeight = height;
  } else {
    console.error(
      new Error("Unknown clip position property - " + clipPosition)
    );
  }

  return {
    cropX: x,
    cropY: y,
    cropWidth: newWidth,
    cropHeight: newHeight,
  };
}

// function to apply crop
function applyCrop(pos) {
  const img = layer.findOne(".image");
  img.setAttr("lastCropUsed", pos);
  const crop = getCrop(
    img.image(), {
      width: img.width(),
      height: img.height()
    },
    pos
  );
  img.setAttrs(crop);
}

fileUploadInput.addEventListener("change", function(event) {
  const file = event.target.files[0];

  if (file) {
    const reader = new FileReader();
    layer.destroyChildren();
    reader.onload = function(e) {
      const url = e.target.result;
      contentImgFieldPhoto.classList.add("active");
      removeUploadedImage.style.display = "flex";
      fileUploadLabel.textContent = "Replace Image";

      const imgObj = new Image();
      imgObj.onload = function() {
        const img = new Konva.Image({
          x: 7,
          y: 7,
          image: imgObj,
          width: imgWidth,
          height: imgHeight,
          draggable: true,
          name: "image",
        });

        layer.add(img);

        const tr = new Konva.Transformer({
          nodes: [img],
          keepRatio: false,
          flipEnabled: false,
          boundBoxFunc: function(oldBox, newBox) {
            if (Math.abs(newBox.width) < 10 || Math.abs(newBox.height) < 10) {
              return oldBox;
            }
            return newBox;
          },
        });

        layer.add(tr);

        document.addEventListener("click", (e) => {
          const canvas = document.querySelector("#photoField canvas");
          if (canvas.contains(e.target)) {
            tr.nodes([img]);
          } else {
            tr.nodes([]);
          }
        });

        img.on("transform", function() {
          img.setAttrs({
            scaleX: 1,
            scaleY: 1,
            width: img.width() * img.scaleX(),
            height: img.height() * img.scaleY(),
          });
          applyCrop(img.getAttr("lastCropUsed"));
        });

        layer.batchDraw();
      };
      imgObj.src = url;
    };

    reader.readAsDataURL(file);
  }
});