无法捕获 div 元素内的坐标

Question

我需要通过点击捕捉坐标。但是当我在 cont 内部单击时，我得到了不正确的值。这可能是什么原因？看来，捕获的x坐标是正确的，但是y坐标是不正确的。

HTML :

<div id='first'> 
        <p> First</p>
        <div id='second'>
            <p>Second</p>
            <div id='cont'>
                    <span id='player'>  <img src='pro.png'/><strong>1</strong> </span>
                    <span id='player2'> <img src='pro.png'/><strong>2</strong> </span>
                    <span id='player3'> <img src='pro.png'/><strong>3</strong> </span>
                    <span id='player4'> <img src='pro.png'/><strong>4</strong> </span>
            </div>
        </div>
</div>

jquery :

$('#cont').click(function(event) {
                var parentOffset = $(this).parent().offset();
                if(count == 0) {
                    x1 = event.pageX - parentOffset.left;
                    y1 = event.pageY - parentOffset.top;
                    $('#cont').line(x1,y1,x1+1,y1+1,{color:"white", style: "dashed"});
                }           

});

Answer 1

如果您试图获得相对于 #cont 的偏移位置，则 parent() 子句是不必要的。

如果您试图获得与 #second 相关的位置，则继续使用 parent() 子句。

此外，如果您想在 #first 中获得位置，请添加 另一个 parent() 子句。

如果您试图在页面本身的上下文中获取点击的位置（'global' 位置），请使用事件的 'pageX' 和 'pageY' 属性.

$('#cont').click(function(event) {
    var parentOffset = $(this).offset();
    var x1 = event.pageX - parentOffset.left;
    var y1 = event.pageY - parentOffset.top;
    console.log("Local position: " + x1 + ", " + y1);
    var mouseXPos = event.pageX;
    var mouseYPos = event.pageY;   
    console.log("Global position: " + mouseXPos + ", " + mouseYPos);
});

我在 Fiddle 中提供了每个示例：https://jsfiddle.net/ovL7ztob/2/

无法捕获 div 元素内的坐标

Unable to capture coordinates inside a div element

javascript

jquery

coordinates