鼠标onmousemove onmouseup onmousedown事件
鼠标跟随:
鼠标事件在所有的浏览器里都支持,鼠标的坐标保存在clientX和 clientY中(水平和垂直距离坐标,不包括页面滚动距离)
<script type="text/javascript"> /*拖动面板的时候会以面板左上角坐标为参考系 *要保证光标在移动完之后仍然在面板里的绝对位置时 *需要把光标在面板的绝对距离算出来 *再将光标在整个页面的坐标减去在面板的绝对距离 */ var oTitle = getByClass('childId','parentId'); oTitle.onmousedown=function(event){ event = event || window.event; var pTitle = document.getElementById('parentId'), //光标与面板顶端的距离 //clientX和clientY是该对象(一个点)光标的坐标 disX=event.clientX-pTitle.offsetLeft, disY=event.clientY-pTitle.offsetTop; //移动 document.onmousemove=function(event){ event = event||window.event; fnMove(event,disX,disY); } //释放 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } var oClose=document.getElementById('close_btn'); oClose.onclick=function(){ document.getElementById('parentId).style.display='none'; function fnMove(e,posX,posY){ var oDrag= document.getElementById('parentId'); var l=e.clientX-posX,//面板左上角的X坐标 r=e.clientY-posY,//面板左上角的Y坐标 winW=document.documentELement.childWidth||document.body.childwidth,//屏幕宽度 winH=document.documentELement.childHeight||document.body.childheight,//屏幕高度 maxW=winW-oDrag.offsetWidth,//可移动的最大宽度 maxH=winH-oDrag.offsetHeight;//可移动的最大高度 if(l<0){ l=0;//左边不要超出范围 }else if(l>maxW){ l=maxW;//右边不要超出范围 } if(r<0){ r=0;//左边不要超出范围 }else if(r>maxH){ r=maxH;//右边不要超出范围 } //给面板设置一个规格 oDrag.style.left=l+'px'; oDrag.style.top=r+'px'; } onmousedown是针对鼠标 onmousemove onmouseup是针对整个页面,鼠标元素在整个页面移动 </script>
onblur事件:鼠标失去焦点
onfocus事件:鼠标获得焦点