Question

如何让鼠标点击坐标相对于父div的左上角而不是浏览器视口的左上角？

示例：如果您点击下面代码中的#mydiv，如何获取相对于#mydiv左上角的坐标？

＆＃13;

mydiv.onclick = function(e) { alert(e.clientX + ' ' + e.clientY); }

＆＃13;

#blah { position: absolute; top:50px; left:60px; width: 1000px; height: 1000px; background-color: #F0F }

#mydiv { position: absolute; top:100px; left:100px; width: 100px; height: 100px; background-color: #FF0 }

＆＃13;

<div id="blah"><div id="mydiv">Blah</div></div>

＆＃13;

已编辑（示例中存在重大错误）。

Answer 1

试一试：

mydiv.onclick = function(e) { 
    var offsets =element_offsets(this.parentNode);
    alert(e.clientX-offsets.left);
    alert(e.clientY-offsets.top);
}


function element_offsets(e) {
    var left = 0, top = 0;
    do {
        left += e.offsetLeft;
        top += e.offsetTop;
    } while (e = e.offsetParent);
    return { left: left, top: top };
}

Answer 2

下面是我的代码，抱歉使用JQuery：但是它给出了父元素相对于#mydiv的坐标。

$('#mydiv').on('click', function(e) { 
    var offs = $('#mydiv').offset();
    alert((e.clientX - offs.left) + ' ' + (e.clientY - offs.top)); 
});

Answer 3

请参阅此页面中的脚本和示例：

http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2

鼠标单击相对于父div的左上角的坐标

3 个答案: