javascript - 获取当前单击的相对于元素的坐标

Question

我有一个函数可以在不使用工作正常的 JQuery 的情况下获取最近单击的位置相对于 div 元素的坐标。

没有 jquery(工作):

var Board = document.getElementById("board"); // div element

function mouseListener(e)
{
    var posX = e.clientX - Board.getBoundingClientRect().left,
        posY = e.clientY - Board.getBoundingClientRect().top
    console.log(posX+" : "+posY);
}

window.addEventListener("mousedown", mouseListener,false);

但是与之前的代码相比，这个代码使用了 JQuery 并给出了不同的坐标

使用 jquery(不工作):

var Board = $("#board");

function mouseListener(e)
{
   var posX = e.clientX - Number(Board.css("left").replace("px", "")),
       posY = e.clientY - Number(Board.css("top").replace("px", ""));
   console.log(posX+" : "+posY);
}

$(window).mousedown(mouseListener);

如何在 jQuery 上正确编写它，以便它像第一个代码一样工作？

Answer 1

对于 jQuery，您必须使用 .offset() 来获得与 .getBoundingClientRect() 相同的值:

function mouseListener(e) {
   var posX = e.clientX - parseFloat(Board.offset().left),
       posY = e.clientY - parseFloat(Board.offset().top);
   console.log(posX+" : "+posY);
}

jQuery.fn.offset() Reference here ;

可以通过三种方式附加事件处理程序。在 jQuery < 1.7 中使用，但仍可在较新版本中使用:

$(window).bind('mousedown', mouseListener);

从 jQuery 1.7 开始使用 .on() 方法，它对于事件委托(delegate)也具有最大的灵 active :

$(window).on('mousedown', mouseListener);

第三个是你用过的，它只是一个快捷方式，内部调用了.on()。

Reference jQuery.fn.bind() - - - - Reference jQuery.fn.on()