鼠标事件类型包括：click dblclick mousedown mouseout mouseover mouseup mousemove
其中鼠标点击包括：click（单击）、dblclick（双击）、mousedown（按下）、mouseup（松开）
鼠标点击：每次点击输出不同的值，并且限制每次点击时间间隔为3s
var count=0;//标记，配合数组 每次输出不同的值
var CLICKMARK = 0;//标记,可用于防止重复点击按钮的场景btn.οnclick=function(){
if (CLICKTAG == 0) {
var ouput=["a","b","c"];
if(count<3){
alert(ouput[count++]);
}
CLICKMARK = 1;
btn.disabled=true;//按钮置灰
// 等待3s后重置按钮可用
setTimeout(function () { CLICKMARK = 0 ; btn.disabled=false;}, 3000);
}
}鼠标移动（mousemove）：（拖放）
<div id="box">元素的拖放</div>
<script type="text/javascript">
//初始化拖放对象
var box=document.getElementById("box");
box.style.position="absolute";//拖放元素为绝对定位
box.style.width="160px";
box.style.height="120px";
box.style.backgroundColor="red";
//初始化变量，标准化事件对象
var mx,my,ox,oy;// 前两变量按下鼠标的指针xy坐标，后两变量拖动元素的xy坐标
function e(event){
if(!event){//兼容IE
event=window.event;
event.target=event.srcElement;
event.layerX=event.offsetX;//layerX为最近绝对定位元素的左上角为原点定义x轴坐标，兼容Mozilla和Safari
event.layerY=event.offsetY;
}
event.mx=event.pageX||event.clientX+document.body.scrollLeft;//pageX不兼容IE，clientX不兼容Safari，窗口左上为原点定义X坐标
event.my=event.pageY||event.clientY+document.body.scrollTop;
return event;
}
//定义鼠标事件处理函数
document.οnmοusedοwn=function(event){//按下鼠标时，初始化处理
event=e(event);
o=event.target;
ox=parseInt(o.offsetLeft); //拖放元素的x轴 坐标（按下时）
oy=parseInt(o.offsetTop); //拖放元素的y轴 坐标
mx=event.mx;
my=event.my;
document.οnmοusemοve=move; //注册鼠标移动事件处理函数
document.οnmοuseup=stop; //注册松开鼠标事件处理函数
}
function move(event){
event=e(event);
o.style.left=ox+event.mx-mx+"px"; //定义拖动元素的x轴 距离
o.style.top=oy+event.my-my+"px";
}
function stop(event){
event=e(event);
ox=parseInt(o.offsetLeft); //记录拖放元素的x轴 坐标（松开时）
oy=parseInt(o.offsetTop); //记录拖放元素的x轴 坐标
mx=event.mx;
my=event.my;
o=document.οnmοusemοve=document.οnmοuseup=null;//释放所有操作对象
}
</script>鼠标经过： 移过（mouseover）和移出（mouseout）
<div>
<div>
<div>盒子mouseout mouseover</div>
</div>
</div>
<script>
var div=document.getElementsByTagName("div");
for(var i=0;i<div.length;i++){
div[i].οnmοuseοver=function(e){//移过 边框变蓝（外层div到内存div的过程）
this.style.border="solid blue";
}
div[i].οnmοuseοut=function(){//移出 边框变红
this.style.border="solid red";
}
}
</script>鼠标来源：target 或srcElement
<div>div元素</div>
<script>
var div1=document.getElementsByTagName("div")[0];
div1.οnmοuseοver=function(e){
var e=e||window.event;
var o=e.target||e.srcElement;
alert(o.tagName);//返回div
}
</script> <script>
var div1=document.getElementsByTagName("div")[0];
div1.οnmοuseοver=function(e){
var e=e||window.event;
var o=e.relatedTarget||e.toElement;
alert(o.tagName);//返回HTML（或BODY）
}
div1.οnmοuseοut=function(e){
var e=e||window.event;
var o=e.relatedTarget||e.toElement;
alert(o.tagName);//返回HTML（或BODY）
}
</script>鼠标定位：
clientX clientY 以浏览器窗口左上顶角为原点定位，不兼容Safari
offsetX,offsetY 以当前事件的目标对象左上角为原点定位，不兼容Mozilla
pageX pageY 以Document对象（文档窗口）左上角为原点定位，不兼容IE
screenX screenY 以计算机屏幕左上角为原点定位，兼容所有浏览器
layerX layerY 以最近的绝对定位的父元素（如果没有，则以Document对象）左上角为原点定位，兼容Mozilla Safari
举例：pageX pageY clientX clientY 封装鼠标定位代码
1.元素跟随鼠标指针
<div id="div1">鼠标跟随</div>
<script>
var div1=document.getElementById("div1");
var pos=function(o,x,y,event){//x,y为元素偏离指针的偏移量
var posX=0,posY=0;
var e=event||window.event;
if(e.pageX||e.pageY){//获取鼠标指针的当前位置
posX=e.pageX;
posY=e.pageY;
}else if(e.clientX||e.clientY){//window等对象会出现滚动条偏移量需要加上
posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
poxY=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
}
o.style.position="absolute";
o.style.top=(posY+y)+"px";
o.style.left=(posX+x)+"px";
}
document.οnmοusemοve=function(event){
pos(div1,10,20,event);
}
</script>
2、获取鼠标指针在元素内的坐标，即以元素自身为坐标参照物来获取鼠标指针的位置
offsetX offsetY 但须要 layerX layerY来兼容Mozilla浏览器
<input type="text" id="text">
<span style="position:absolute;">
<div id="div1" style="width:200px;height:160px;border:solid 1px red">鼠标跟随</div>
</span>
<script>
var t=document.getElementById("text");
var div1=document.getElementById("div1");
div1.οnmοusemοve=function(event){
var event=event||window.event;
if(event.offsetX||event.offsetY){
t.value="X:"+event.offsetX+"，Y: "+event.offsetY;
}else if(event.layerX||event.layerY){
t.value="X:"+(event.layerX-1)+"，Y: "+(event.layerY-1);//layerX以绝对定位的父元素为参照，需适当减去一个或几个px的偏移量
}
}
</script>注意：在元素外层包裹了一个绝对定位元素，会破坏整个页面的结构布局，在确保人为方式不会导致页面结构混乱的前提下可考虑这种方法
鼠标按键：
通过事件对象的button属性可获取当前鼠标按下的键，可用于 click mousedown mouseup事件类型
单击 IE 标准
左键 1 0
右键 2 2
中键 4 1
同时左右 3（1+2） 不支持
同时中右 6 不支持
同时左中 5 不支持
同时左中右 7 不支持
监测右键单击操作，并组织默认行为
document.οnclick=function(e){
var e =e||window.event;
if(e.button==2){
e.preventDefault();
return false;
}
}
