一、事件对象
事件：onmouseover、 onmouseout、 onclick
event //事件的对象
兼容写法：var event = event || window.event;
event常见属性，如下表：
|
属性 |
作用 |
|
data |
返回拖拽对象的URL字符串（dragDrop） |
|
width |
该窗口或框架的高度 |
|
height |
该窗口或框架的高度 |
|
pageX |
光标相对于该网页的水平位置（ie无） |
|
pageY |
光标相对于该网页的垂直位置（ie无） |
|
screenX |
光标相对于该屏幕的水平位置 |
|
screenY |
光标相对于该屏幕的垂直位置 |
|
target |
该事件被传送到的对象 |
|
type |
事件的类型 |
|
clientX |
光标相对于该网页的水平位置 （当前可见区域） |
|
clientY |
光标相对于该网页的水平位置 |
二、pageX、 clientX、 screenX的区别
1、screenX 、screenY 以电脑屏幕为基准
2、pageX 、pageY 以文档（绝对定位）为基准 IE6、7、8不认识
3、clientX、 clientY 以可视区域为基准
三、其他事件
div.onmouseover 和div.onmousemove 区别
相同点都是 经过 div 才会触发
div.onmouseover 只触发一次
div.onmousemove 每移动一像素，就会触发一次
onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候
1、拖动 原理 == 鼠标按下 接着 移动鼠标 。
bar.onmousedown = function(){
document.onmousemove = function(){
}
}
当我们按下鼠标的时候，就要记录当前 鼠标 的位置 - 大盒子的位置
1、 算出 bar 当前 在 大盒子内的距离 。
三、防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
案例：
1、鼠标点击跟随动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>鼠标点击跟随效果</title>
6 <style>
7 #image{
8 width: 88px;
9 position: absolute;
10 left: 0;
11 top:0;
12 }
13 </style>
14 </head>
15 <body>
16 <img src="img.jpg" alt="" id="image">
17 </body>
18 </html>
19 <script>
20 /*document.onclick=function(event){
21 var event=event||window.event;
22 console.log(event.pageX);
23 console.log(event.clientX);
24 console.log(event.screenX);
25
26 }*/
27
28 var image=document.getElementById("image");
29 document.onclick=function(event){
30 var event=event||window.event;
31 targetX=event.clientX-image.offsetWidth/2;
32 targetY=event.clientY-image.offsetHeight/2;
33 }
34 //缓动动画
35 var leaderX=0;
36 var leaderY=0;
37 var targetX=0;
38 var targetY=0;
39 setInterval(function(){
40 leaderX=leaderX+(targetX-leaderX)/10;
41 leaderY=leaderY+(targetY-leaderY)/10;
42 image.style.left=leaderX+"px";
43 image.style.top=leaderY+"px";
44 },10)
45
46 </script>
运行效果：
时间： 2024-08-10 16:49:57