鼠标移动对象:
onmousemove
事件对象:
在事件的响应函数被触发时,浏览器每一次都会将该事件对象作为实参传入响应函数
该事件对象包含了一切当前事件相关的一切信息,比如:鼠标的坐标,键盘上那个键被按下,鼠标滚轮滚动的方向
在IE8以及以下的浏览器中,响应函数被触发时,不会传递函数对象,而是将事件对象作为window对象的属性保存的(event)
练习:
1.显示鼠标在方块中的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width:100px;
height:100px;
background-color: bisque;
}
#show{
margin-top:20px;
width:100px;
height:20px;
border:solid 1px darkcyan;
}
</style>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
var show=document.getElementById("show");
var Y;
var X;
//查看整个页面中的clientX,clientY
//在IE8以及以下,通过event来查看(window的属性)
box.οnmοusemοve=function(event){
//考虑兼容性,如果event不存在,
//就将event.window赋值给event
event=event||window.event;
Y=event.clientY;
X=event.clientX;
show.innerHTML="X="+X+" Y="+Y;
};
};
</script>
</head>
<body>
<div id="box"></div>
<div id="show"></div>
</body>
</html>
2.拖动div小方块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
width:1000px;
width:1000px;
}
#box{
width:100px;
height:100px;
background-color: royalblue;
/*开启绝对定位,使方块可以移动*/
position:absolute;
}
#show{
margin-top:120px;
width:100px;
height:30px;
border: solid 2px bisque;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
var Y;
var X;
//修正方块的位置,让鼠标在方块的中心
var top=box.offsetHeight/2;
var left=box.offsetWidth/2;
//在鼠标进入box的时候触发移动鼠标事件
box.onmousemove=function(){
//这样,即使鼠标脱离了box,也可以让鼠标进行移动
document.onmousemove=function(event){
event=event||window.event;
//获取鼠标的位置
Y=event.clientY;
X=event.clientX;
//当页面有滚动条的时候,获取鼠标位置就变了.在滚动条下面的时候,方块就不会再向下移动了
//原因:用clientY,X的时候他们有最大值,就是当前显示页面的高宽
//通过scroll来修正水平,垂直偏移量
//Chrome中偏移量通过document.body获得,而Firefox通过document.documentElement来获取
/*var scrollY=document.documentElement.scrollTop;
var scrollX=document.documentElement.scrollLeft;*/
var scrollY=document.body.scrollTop;
var scrollX=document.body.scrollLeft;
show.innerHTML="X="+scrollX+" Y="+scrollY;
//设置方块的位置
//一般设置width都是以px为单位,得到的x,y是数字,加上px
box.style.top=Y-top+scrollY+"px";
box.style.left=X-left+scrollX+"px";
};
};
};
</script>
</head>
<body>
<div id="box"></div>
<div id="show"></div>
</body>
</html>
也可以用pageY,pageX来获取当前鼠标的位置,但是IE8以及以下浏览器不支持
通过event来使用pageY,pageX(很好用的)