问题描述
HTML代码：<!Doctype html><html lang="en"><head><meta charset="utf-8" /><title>2.2.1</title><style type="text/css">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; }</style><script type="text/javascript" src="js/util.js"></script><script type="text/javascript">window.onload=function(){ var can=document.getElementById('canvas'); var mouse1=captureMouse(can); can.onmousedown=function(){ console.log("x:"+mouse1.x); }}</script></head><body><h2>canvas动画</h2><div id="canvas"><canvas width="600" height="600"><i>您的浏览器版本太低，请升级至最新版本</i></canvas></div></body></html>下面是utils.js代码：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;}问题出现在captureMouse这个函数的返回值上面（captureMouse函数是一个求鼠标相对当前元素坐标的求法函数）。captureMouse在html页面onload后会执行一次，然后为ele元素绑定了鼠标移动事件，同时会将当前鼠标相对于ele元素的坐标返回，html页面接受变量为mouse1。但是大家想一下，接下来的鼠标移动只是响应了鼠标移动的事件，但是html页面并没有在鼠标移动的同时调用captureMouse，所以mouse1这个对象应该是一个不变的值，但是当我点击ele元素时发现坐标是变的，这是为什么呢？鼠标按下输入控制台的是mouse1对象的x的值，求大神指点迷津。 问题补充：请注意，mouse1的值只有在onload时赋予了值，之后的鼠标移动事件没有对mouse1的值做出改变，但为什么点击ele显示的mouse1的值是在变化着的？
解决方案
ele.onmousemove=function(event){ event=event || window.event; 传入这个参数是canvas，你这行代码给它添加了监听鼠标滑过的监听，只要鼠标在canvas上移动，就会触发事件，上面的代码和下面的是等效的。var captureMouse=function(ele){ var mouse={x:0,y:0}; ele.onmousemove=function(event){ event=event || window.event; if(event.pageX || event.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; };ele.onmousedown=function(){ console.log("x:"+mouse.x); } return mouse;}window.onload=function(){ var can=document.getElementById('canvas'); var mouse1=captureMouse(can); }
解决方案二：
问题在 var captureMouse=function(ele){ var mouse={x:0,y:0}; ele.onmousemove=function(event){ ，其中ele.onmousemove=function(event)这里已经给ele添加了function,当然会自动执行这个函数