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

如果您尝试获取与parent()相关的偏移位置，则不需要#cont子句。

如果您尝试获得与#second相关的职位，请继续使用parent()条款。

此外，如果您要在#first中找到该位置，请添加另一个 parent()子句。

如果您想在页面本身的上下文（全局＆＃39;位置）中获取点击的位置，请使用＆＃39; pageX＆＃39;和＆＃39; pageY＆＃39;事件的属性。

$('#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);
});

我在小提琴中提供了一个例子：https://jsfiddle.net/ovL7ztob/2/

无法捕获div元素内的坐标

1 个答案: