<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{width: 100px;height: 100px;position: absolute;background: red;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var diffX=0;
var diffY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
diffX=oEvent.clientX-oDiv.offsetLeft;
diffY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){mouseMove()};
document.onmouseup=mouseUp;
return false;
function mouseMove(ev){
var oEvent=ev||event;
var _left=oEvent.clientX-diffX;
var _top=oEvent.clientY-diffY;
oDiv.style.left=_left+'px';
oDiv.style.top=_top+'px';
}
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
}
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
一段简单的拖拽应用,我不太明白的是:
在给document.onmousemove添加mouseMove函数时,为什么可以不加ev参数?而直接写成mouseMove;?
我原本等号右边是写成这样的,但是失败了。
document.onmousemove=function(){mouseMove(ev)};
原本我一直认为如果函数本身带参数的话外面是需要包一个functioin的,但是现在好像又不对了。
另外,如果我写成这样居然也是可以的,就是在function的参数里加一个ev就可以。
document.onmousemove=function(ev){mouseMove(ev)};
或者mouseMove里不写参数而写在function参数里
document.onmousemove=function(ev){mouseMove()};
给 onmousemove
赋值一个匿名函数,这个匿名函数中调用了 mouseMove
。ev
是 onmousemove
的参数,由匿名函数获得,并传递给 mouseMove
document.onmousemove = function(ev){
mouseMove(ev)
};
不过既然参数一样,只是简单的传递,那么其实可以简化成
document.onmousemove = mouseMove;
注意是 mouseMove
不是 mouseMove()
,也不是 mouseMove(ev)
,因为 mouseMove
是一个函数对象,而后两种形式都是调用函数,将返回值赋给 onmousemove
。
参考:https://developer.mozilla.org/zh-CN/docs...
document.onmousemove=function(){
//这是个匿名函数
mouseMove(ev);//这里使用了一个未定义的变量ev
};
document.onmousemove=function(){mouseMove(ev)};
中ev是个未定义的变量,当然不行。