Question

我正在制作棋盘游戏。在匹配完成后，电路板会动态添加，并根据屏幕大小确定每个播放器的大小。这意味着正确放置部件我需要知道电路板在DOM中的位置

$(document).on('click', '#boardOverlay', function(event){

    event.preventDefault();

    var offset = $(this).offset();

    alert("offset.left: " + offset.left + " offset.top: " + offset.top );

    var move = {};

    var mouseX = event.pageX - offset.left; 
    var mouseY = event.pageY - offset.top;


    move.Y = Math.floor(mouseX / board.piece_length);
    move.X = Math.floor(mouseY / board.piece_length);

    socket.emit('move', move, board.color);

});

在警告声明执行之前，Chrome会向我发送此错误

> Uncaught TypeError: Cannot read property 'clientTop' of null    jquery.min.js:4

我做错了什么？我已经研究了offset和position，并认为偏移是正确的选择，但两者都没有运气。

注意： .on()方法正在运行，因为如果我将电路板留在左上角并假设offset.left和offset.top为0功能正常。

更新：这是抛出错误的JQuery行

clientTop  = docElem.clientTop  || body.clientTop  || 0;

是非缩小版

的第9264行

Answer 1

也许尝试直接访问属性：

$(document).on('click', '#boardOverlay', function(event){
 var top = $(this).css("top");
 var left = $(this).css("left");
});

获取动态添加元素的位置

1 个答案: