最近做个小东西需要得到页面上鼠标的位置。
原来的代码如下:
function getCoords(e) {
var offsetLeft = svg.offsetLeft;
var offsetTop = svg.offsetTop;
return (e.clientX - offsetLeft) + ',' + (e.clientY - offsetTop);
}
如果页面没有滚动条的时候一切正常,但是出现滚动条并且拉动滚动条之后,就出现了问题。
原来clientX得到的鼠标位置是相对于浏览器的,如果要得到当前鼠标相对于整个页面的位置需要另一个属性:pageX。
正确的代码如下:
function getCoords(e) {
var offsetLeft = svg.offsetLeft;
var offsetTop = svg.offsetTop;
return (e.pageX - offsetLeft) + ',' + (e.pageY - offsetTop);
}
参考文章:
http://www.bennadel.com/blog/1869-jQuery-Mouse-Events-PageX-Y-vs-ClientX-Y.htm