javascript函数返回的一个奇怪的现象

0 0

javascript函数返回的一个奇怪的现象5

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的值是在变化着的？

JavaScript 函数

2013年8月14日 15:43

好好学习行不
22
0 0 5

查看图片附件

2个答案按时间排序按投票排序

0 0

采纳的答案

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);
   
}

2013年8月14日 17:17

zyn010101
2795
2 3 156

2条评论

0 0

问题在 var captureMouse=function(ele){
var mouse={x:0,y:0};
ele.onmousemove=function(event){ ，
其中
ele.onmousemove=function(event)
这里已经给ele添加了function,当然会自动执行这个函数

2013年8月14日 16:27