提问人：Cool 提问时间：11/17/2023 更新时间：11/17/2023 访问量：29
TouchStart 事件在服务器上缺少信息
touchstart event missing information on server
问：
我正在尝试使用 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 在服务器中没有触摸信息。
当地：
服务器：
答：
0赞
Konstantinos K.
11/17/2023
#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,
};
}
}
});
评论
0赞
Wyck
11/17/2023
你改变了什么，为什么？
0赞
ibrahim tanyalcin
11/17/2023
#2
您可以从屏幕截图中获取。如果你只关心抓住第一个接触点，那就用链条来炸毁它：originalEvent
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");
对 Y 和 X 都执行上述操作。例如，您的 xCoord 将是：
xCoord = parseInt(getClient(evt, "X")) -
(parseInt(evt.target.offsetLeft) +
parseInt(evt.target.offsetParent.offsetLeft))
评论