HTML代码：
[code="HTML"]
<!Doctype html>
2.2.1 h2{ text-align: center; color: #666; text-shadow: 2px 2px 2px #eee; margin: 10px;} body{ margin:0px; padding:0px; background-color: #DDD;} #canvas{ width: 600px; height: 600px; position:relative; margin:0px auto; padding:10px; background-color: #999; border: 10px solid #F40; box-shadow: 1px 1px 10px #f60; } window.onload=function(){ var can=document.getElementById('canvas'); var mouse1=captureMouse(can); can.onmousedown=function(){ console.log("x:"+mouse1.x); } }
canvas动画
[/code]
下面是utils.js代码：
[code="javascript"]
var captureMouse=function(ele){
var mouse={x:0,y:0};
ele.onmousemove=function(event){
event=event || window.event;
if(event.pageX || wvwnt.pageY){
x=event.pageX;
y=event.pageY;
}else{
x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
}
x-=ele.offsetLeft;
y-=ele.offsetTop;
mouse.x=x;
mouse.y=y;
};
return mouse;
}
[/code]
问题出现在captureMouse这个函数的返回值上面（captureMouse函数是一个求鼠标相对当前元素坐标的求法函数）。
captureMouse在html页面onload后会执行一次，然后为ele元素绑定了鼠标移动事件，同时会将当前鼠标相对于ele元素的坐标返回，html页面接受变量为mouse1。
但是大家想一下，接下来的鼠标移动只是响应了鼠标移动的事件，但是html页面并没有在鼠标移动的同时调用captureMouse，所以mouse1这个对象应该是一个不变的值，但是当我点击ele元素时发现坐标是变的，这是为什么呢？鼠标按下输入控制台的是mouse1对象的x的值，求大神指点迷津。
