touchstart event missing information on server

Question

I am trying to implement drag and drop functionality using javscript and following code is working fine in my local but, it is not working in the server. Debug information is given below:

$(document).on("mousedown touchstart", "#canvas", function (evt) {
    //ClearCanvas();
    var canvasSide = isMobile ? 320 : 600;
    if ($("img").is(":animated") === false) {
      var iconSize = canvasSide / board.boardSize;
      var xCoord, yCoord;

      if (evt.type === "mousedown") {
        xCoord = evt.offsetX;
        yCoord = evt.offsetY;
      } else {console.log(evt.type);console.log(evt);
        xCoord =
          parseInt(evt.touches[0].clientX) -
          (parseInt(evt.target.offsetLeft) +
            parseInt(evt.target.offsetParent.offsetLeft));
        yCoord =
          parseInt(evt.touches[0].clientY) -
          (parseInt(evt.target.offsetTop) +
            parseInt(evt.target.offsetParent.offsetTop));
      }

      var col = Math.floor(xCoord / iconSize);
      var row = Math.floor(yCoord / iconSize);

      var img = document
        .querySelectorAll("[data-position='" + col + "-" + row + "']")
        .item(0);

      if (img != null) {
        $(img).css("z-index", 2);

        var top = parseInt($(img).css("top"));
        var left = parseInt($(img).css("left"));

        dragDropInfo = {
          candyImg: img,
          initCol: col,
          initRow: row,
          initTop: top,
          initLeft: left,
          initXCoord: xCoord,
          initYCoord: yCoord,
        };
      }
    }
});

Error is throwing at 'evt.touches[0]'. Because evt does't have touches information in server.

Local:

Server:

Answer 1

Try this bellow:

$(document).on("mousedown touchstart", "#canvas", function (evt) {
    var canvasSide = isMobile ? 320 : 600;

    if ($("img").is(":animated") === false) {
        var iconSize = canvasSide / board.boardSize;
        var xCoord, yCoord;

        if (evt.type === "mousedown") {
            xCoord = evt.offsetX;
            yCoord = evt.offsetY;
        } else if (evt.touches && evt.touches.length > 0) {
            xCoord = evt.touches[0].clientX - (parseInt(evt.target.offsetLeft) + parseInt(evt.target.offsetParent.offsetLeft));
            yCoord = evt.touches[0].clientY - (parseInt(evt.target.offsetTop) + parseInt(evt.target.offsetParent.offsetTop));
        } else {
            console.log("Unsupported touch event");
            return;
        }

        var col = Math.floor(xCoord / iconSize);
        var row = Math.floor(yCoord / iconSize);

        var img = document
            .querySelectorAll("[data-position='" + col + "-" + row + "']")
            .item(0);

        if (img != null) {
            $(img).css("z-index", 2);

            var top = parseInt($(img).css("top"));
            var left = parseInt($(img).css("left"));

            dragDropInfo = {
                candyImg: img,
                initCol: col,
                initRow: row,
                initTop: top,
                initLeft: left,
                initXCoord: xCoord,
                initYCoord: yCoord,
            };
        }
    }
});

Answer 2

You can grab the originalEvent from your screenshot. If all you care is to grab the first touch point regardless, blast it with chaining:

const getClient(evt, XorY) => evt?.touches?.[0]?.[`client${XorY}`] 
?? evt?.targetTouches?.[0]?.[`client${XorY}`] 
?? evt?.originalEvent?.touches?.[0]?.[`client${XorY}`] 
?? evt?.originalEvent?.targetTouches?.[0]?.[`client${XorY}`]

//usage
let clientX = getClient(evt, "X");

do the above for both Y and X. For instance your xCoord would be:

xCoord = parseInt(getClient(evt, "X")) -
         (parseInt(evt.target.offsetLeft) +
         parseInt(evt.target.offsetParent.offsetLeft))