相关文章
更多最近更新
更多javascript函数返回的一个奇怪的现象
2019-03-25 13:32|来源: 网路
HTML代码：
下面是utils.js代码：
问题出现在captureMouse这个函数的返回值上面（captureMouse函数是一个求鼠标相对当前元素坐标的求法函数）。
captureMouse在html页面onload后会执行一次，然后为ele元素绑定了鼠标移动事件，同时会将当前鼠标相对于ele元素的坐标返回，html页面接受变量为mouse1。
但是大家想一下，接下来的鼠标移动只是响应了鼠标移动的事件，但是html页面并没有在鼠标移动的同时调用captureMouse，所以mouse1这个对象应该是一个不变的值，但是当我点击ele元素时发现坐标是变的，这是为什么呢？鼠标按下输入控制台的是mouse1对象的x的值，求大神指点迷津。
问题补充：请注意，mouse1的值只有在onload时赋予了值，之后的鼠标移动事件没有对mouse1的值做出改变，但为什么点击ele显示的mouse1的值是在变化着的？
<!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的值是在变化着的？
相关问答
更多-
呵呵 恁的情况是属于网银控件未安装 或者未正确加载 重启浏览器 登录工行官网后 有恨显眼的控件下载和安装的链接 按照提示操作 注意安装时别被360拦截。。。最好使用IE浏览器 会很流畅 安装后 再次重启 登录网银 进行支付。。。
-
只需返回一个对象。 return { a:1, b:2 }; Just return an object. return { a:1, b:2 };
-
Javascript非常simle函数返回奇怪的值[重复](Javascript very simle function returns weird values [duplicate])[2022-05-26]
log2（23905762501722146）〜= 54.408 JavaScript将所有数字（包括整数）存储为双精度浮点数。 双精度尾数/有效数包含52位信息，因此一些信息会丢失存储如此长/精确的数字。 log2(23905762501722146) ~= 54.408 JavaScript stores all numbers - including integers - as double precision floats. Double precision mantissa/significand ... -
C：奇怪的弦现象(C: strange string phenomenon)[2022-02-13]
字符串"bar"长度为四个字符： {'b', 'a', 'r', '\0'} 。 如果明确指定数组长度，则需要至少分配四个字符： char bar[4]="bar"; 当你这样做： char bar[3]="bar"; printf("%s",bar); 您正在调用未定义的行为，因为bar变量没有null终止符。 什么事情都可能发生。 在这种情况下，编译器已经在内存中连续布局了两个数组： 'b' 'a' 'r' 'f' 'o' 'o' '\0' ^ ^ bar[3] fo ... -
函数声明被挂起，所以它看起来像这样： (function f() { function f() { return 1; } function f() { return 2; } return f(); })(); 这是这样的： (function f() { var f = function f() { return 1; }; var f = function f() { return 2; }; return f(); })(); 相当于： (func ...
-
所有'旧'函数都保持存在，因为每次调用'addMethod'都会创建一个不同的变量'old' （只能在'addMethod'函数体分隔的范围内访问） All the 'old' functions keep on existing because each call to 'addMethod' creates a distinct variable 'old' (which is only accessible in the scope delimited by the 'addMethod' funct ...
-
你需要在你正在测试的表达式中放置parens > origin.movement ，以便在那里使用该表达式的结果; 如果没有它们，表达式就会被破坏： var makecursor = function (axis, operation) { var oppositeAxis = axis === 'y' ? 'x' : 'y'; app.cursor[axis] = ( // calculate the difference between the current curs ...
-
函数返回的奇怪行为(Odd behavior of function return)[2022-08-29]
您正在进行递归调用，并且在嵌套调用中发出print语句。 但是，不使用search的返回值，这就是为什么它永远不会到达main函数。 下面，我添加了一个被检查的nested变量，以及是否发现了实际返回的内容。 def search(v, searchterm, vid, path=(),): if isinstance(v, dict): for k, v2 in v.items(): p2 = path + ('{}'.format(k),) nested = sear ... -
出队时的奇怪现象(strange phenomenon while dequeuing)[2022-08-01]
// Dequeing one element at a time in a round-robin fashion for(int i=0;i<5; i++) { decoded_pkt=per_port_input_queue[i].front(); send_to_output(decoded_pkt); per_port_input_queue[decoded_pkt.data].pop(); <<<<<====== } 弹出队列取决于您从第i个队列中读取的数据，因此这并不奇怪。 如果你的意思是阅 ... -
错字： var dateString = "" + day "/" + m var dateString = "" + day + "/" + m 在字符串concat上缺少+。 分钟也缺少一个+号。 Typo: var dateString = "" + day "/" + m var dateString = "" + day + "/" + m Missing + on the string concat. minutes is missing a + sign as well.