Javascript,在鼠标点击事件中获取点击位置相对于元素的坐标

正在进行 一个 javascript项目，要在网页上做出 一个简单的鼠标画图板。 画每个元素时， 以鼠标点击的位置作为图像元素的关键点的位置。例如，画一条线段，则鼠标点击两次，分别确定两个端点。

这就要求 能够捕捉鼠标点击事件，并且得知点击的位置相对于画布的坐标。

经过一段时间的研究，参考了raphael sketchpad的代码了之后，得知可这样搞：

1. 1. 将画布的onclick回调函数替换成自定义的函数。

2. 2. 在自定义的onclick回调函数中，利用 JQuery来获取点击位置相对于画布的坐标。

3. 3. 得到坐标 就好搞了，在那里画东西就可以了。

具体 的呢，举个例子，这样一段代码：

hldr.onclick=function(e)

{

e=e||window.event;

// alert(e.clientX); //Debug.

var Clickcircle=R.circle(e.pageX-$(hldr).offset().left,e.pageY-$(hldr).offset().top,10);

Clickcircle.attr("fill","#f00");

Clickcircle.attr("stroke","#fff");

};

hldr是网页上的画布元素，这里是一个div。

回调函数的参数e就是点击事件对象，里面可取出事件相关的一些属性。 要计算出点击位置相对于hldr的坐标的话，就用点击位置相对于浏览器显示区域左上角的坐标减去hldr元素左上角相对于浏览器显示区域左上角的坐标。 看上面代码里var Clickcircle=那一句，R.circle函数的第一个参数是所要画的圆的圆心X坐标，它是这样算出来的：

1. 1. 鼠标点击位置相对 于浏览器窗口左上角的X坐标，即为e.pageX;

2. 2. 减去，hldr元素自身的左上角相对于浏览器窗口左上角的X偏移，即为$(hldr).offset().left,这里，$ ()和.offset() 是JQuery的用法。

3. 3. 这就得到鼠标点击位置相对于hldr元素左上角的X坐标了。

4. 4. Y坐标同理。

无图无真相，发一张图来观摩一下，下图中鼠标那里的一个红点，就是在单击的时候画上去的：

美人 英拉