鼠標單擊相對於父div左上角的坐標

Question

如何獲得相對於父div左上角而非瀏覽器視口左上角的鼠標單擊坐標？

---

示例 ：如果在下面的代碼中單擊#mydiv ，如何獲取相對於#mydiv左上角的坐標？

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

 #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 } 

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

編輯（該示例中存在一個主要錯誤）。

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