服务器上的 touchstart 事件缺少信息

Question

我正在尝试使用 javscript 实现拖放功能，并且以下代码在我的本地工作正常，但在服务器中不起作用。调试信息如下：

$(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,
        };
      }
    }
});

“evt.touches[0]”抛出错误。因为evt在服务器中没有触摸信息。

本地：

服务器：

Answer 1

试试下面这个：

$(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,
            };
        }
    }
});