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

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的值,求大神指点迷津。

yitian_web
yitian_web 且是闭包返回的
6 年多之前 回复
yitian_web
yitian_web var mouse={x:0,y:0}; 对象引用类型
6 年多之前 回复

2个回答

ele.onmousemove=function(event){

event=event || window.event;
传入这个参数是canvas,你这行代码给它添加了监听鼠标滑过的监听,只要鼠标在canvas上移动,就会触发事件,上面的代码和下面的是等效的。
[code="java"]
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);

}
[/code]

zyb2010yaonuli
zyb2010yaonuli 一语点醒梦中人呀,确实,mouse1只是对mouse的引用,相当于指针,多谢了
6 年多之前 回复
zyn010101
zyn010101 面向对象的知识,mouse1并没有新new出来一个对象,它指向的是mouse的引用,跟java里面一样,只要不是基本类型,你把该实例传入一个方法,在方法中修改该实例的变量,在外面的方法中的引用也会随着变化。 package com.zyn.iteye; public class User { private String name; private String password; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public void changeUser(User user){ user.setName("111"); user.setPassword("222"); } /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method stub User user = new User(); user.setName("a"); user.setPassword("123"); user.changeUser(user); System.out.println(user.getName()); System.out.println(user.getPassword()); } }
6 年多之前 回复

问题在 var captureMouse=function(ele){

var mouse={x:0,y:0};

ele.onmousemove=function(event){ ,
其中
ele.onmousemove=function(event)
这里已经给ele添加了function,当然会自动执行这个函数

jinandmei
jinbingchuan 没有偏题,ele就是你传递过来的canvas对象,就想当于你给这个元素添加了onmousemove事件
6 年多之前 回复
zyb2010yaonuli
zyb2010yaonuli 回答的有点偏题了,不过仍然感谢您的帮助,请参考上一条答案的评论,是评论解决了问题
6 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问