獲取的JavaScript

我有一個長的長方形格（父）裏面坐了幾個小格（子）父DIV中鼠標點擊的位置。我想單擊長矩形div（包括子div）上的任何位置以顯示父div左側的偏移量。獲取的JavaScript

目前，當我點擊小的div以外，只要我單擊子DIV中這段JavaScript代碼才能正常運行，就說明孩子的div我的偏移。我很新的JavaScript，似乎無法找到相關的答案。

我希望有人能夠幫助，在此先感謝。

window.onload = function(){ 
    parentDiv.addEventListener('click',function(e){ 
     alert(e.offsetX); 
}, false);

來源

2014-03-19 Sasha Wang

你可以發表小提琴嗎？ –

這裏http://jsfiddle.net發佈演示，請的 –

可能重複[jQuery的獲得元素內的鼠標位置（http://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within- an-element） – Shannon

您可以使用getClientRects方法與clientX事件值，以獲得淨偏移座標：

var offset = this.getClientRects()[0]; 
alert(e.clientX - offset.left);

DEMO

來源

2014-03-19 03:11:31 tewathia

它完美的工作！非常感謝！ –

我覺得很難學習JavaScript如尋求這樣的功能，我必須尋找解決它除了直接詢問可能的方式，沒有其他辦法，你有很好的參考，可能是有益的建議？ –

謝謝。非常適合計算應用變換元素的位置 – cgatian

首先，我建議學習一些關於DOM事件冒泡和捕獲。這是一個DOM的東西，不是一個Javascript的東西，但必須知道。不要在這裏重複，請閱讀this answer。

因此，當您點擊孩子div時，事件首先被呈現給觸發該事件的元素，即子女div。但是，它沒有事件處理程序，因此事件會冒泡到父項div。它確實有一個處理程序，該處理程序通過以arg e傳遞的事件對象進行調用。不同的瀏覽器有不同的事件對象實現。由於您使用的是offsetX，因此您可能使用IE（或Opera），而不是Chrome，Safari或Firefox。根據該doc from Microsoft，offsetX()「設置或檢索一個指針的位置相對於觸發事件的物體的x座標」。因此，儘管它的父級div的事件處理程序正在運行，但您將獲得相對於子級的位置，因爲它是觸發事件的對象。

由於您是JavaScript新手，我會補充一點：由於瀏覽器之間存在許多不兼容問題，因此強烈建議您使用JavaScript庫來處理這些問題，從而爲您提供單一標準化API。你的生活會更容易，你可以做更多的事情，你的代碼不僅僅是IE。 jQuery是一個非常受歡迎的（本身非常漂亮）。閱讀有關jQuery規範化的Event Object。

來源

2014-03-19 03:31:29 BareNakedCoder

獲取的JavaScript

回答

相關問題