javascript - JS pageX和pageY取坐标加上相对位置div的margin？

Question

我有一个要居中的 div，所以我使用

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

我承认这是最简单的居中方式，但是当我想使用 event.pageX 和 event.pageY 时，它需要坐标加上左边距，这是错误的。

这是 fiddle 。单击绿色矩形上的某处以查看结果:

http://jsfiddle.net/FGkUq/

任何想法如何解决以显示正方形到没有左边距的坐标？

Answer 1

看看 updated fiddle .

快速解决方案删除 Canvas 的定位:

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

问题出在模板的定位上。因为 absolute 仍然是“相对的”。

绝对定位的定义:绝对定位元素是相对于第一个非静态定位的父元素定位的。

因此 #template 的位置将考虑 #canvasDiv 的位置，除非您将 #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