JS pageX和pageY取座標加相對位置div的邊距？

我有我要居中一個div所以我用JS pageX和pageY取座標加相對位置div的邊距？

margin-left: auto; 
margin-right: auto; 
position: relative;

這是居中我承認最簡單的方法，但是當我想用event.pageX和event.pageY需要座標加上左利潤率，這是錯誤的。

這是小提琴。點擊綠色矩形某處觀看結果：

http://jsfiddle.net/FGkUq/

任何想法如何解決這樣展示廣場上的座標，而不左邊距？

來源

2013-05-10 Bor

這是居中我承認最簡單的方法，但是當我想用event.pageX和event.pageY需要座標加上左邊距，這就是錯誤的。我不明白這一點？ – PraJen 2013-05-10 09:34:19

看看小提琴 – Bor 2013-05-10 09:39:27

看看updated fiddle。帆布的

快速除去溶液中的定位：

#canvasDiv { 
    width: 30%; 
    height: 400px; 
    cursor:crosshair; 
    background-color: #458B00; 
    /* position: relative; */ 
    ... 
}

問題是與模板的定位。因爲absolute仍然是「相對的」。

絕對定位的定義：絕對位置元素相對於具有非靜態位置的第一個父元素進行定位。

因此，除非你離開#canvasDiv使用默認static定位#template位置會考慮的#canvasDiv位置。

瞭解在w3schools

更多關於定位

內定位相對定位元素絕對要素：here

大example of your problem標籤3 & 4.

如果你想堅持的canvasDiv的相對位置，您必須更新腳本，因此它考慮到canvasDiv的位置：

var x = event.pageX; 
var y = event.pageY; 
var canvasPos = $(this).offset(); // in the context of your script this refers to #canvasDiv 
var styles = { 
    "left" : x - canvasPos.left, // remove its left offset 
    "top" : y - canvasPos.top // remove its top offset 
};

時退房fiddle

來源

2013-05-10 09:34:49 Matyas

是的，但在示例鏈接中，主（父母）div的位置是：relative。這是可能的嗎？ – Bor 2013-05-10 09:46:55

您可以使用'canvas'的相對位置，但腳本也必須知道它。（查看更新後的答案） – Matyas 2013-05-10 09:51:20

JS pageX和pageY取座標加相對位置div的邊距？

回答

相關問題