Question

我有一个函数来获取最近点击的位置与 div 元素的坐标，而不使用JQuery，这是正常工作。

没有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＆lt; 1.7但仍在使用较新的版本：

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

从使用jQuery 1.7方法.on()开始，它对事件委派也具有最大的灵活性：

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

第三个是您使用的，它只是一个快捷方式，并在内部调用.on()。

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

Answer 2

无论你做了什么都是绝对正确的逻辑，只是轻微的语法错误。

var Board = $("#board");

function mouseListener(e)
{
    var posX = e.clientX - Number(Board.css("left").replace("px", "")),     //you forgot to put closing braces here and in the next line.
    posY = e.clientY - Number(Board.css("top").replace("px", ""));
    console.log(posX+" : "+posY);
}

$(window).mousedown(mouseListener);

确保在id＆＃34;＃board＆＃34;元素中使用左侧和顶部样式。 else输出为NaN：NaN。

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

2 个答案: