CSDN博客

img colayungnew

javascript的event事件与获取鼠标光标

发表于2004/11/1 13:11:00  2359人阅读

<script>
    var canmove=false;
 var leftX=0,topY=0,newX=0,newY=0;
        function showpx(){
           var obj=document.getElementById("tbl1");
           var objp=obj.offsetParent
           alert("Top:" + obj.offsetTop + "Left:" +obj.offsetLeft + "px" + objp.offsetTop + "py" +

objp.offsetLeft );       
        }


 function moveAble(){
  if(event.srcElement.id=="moveArea")
     canmove=true;
              leftX=(event.clientX+document.body.scrollLeft)-wizard.style.pixelLeft;
     topY=(event.clientY+document.body.scrollTop)-wizard.style.pixelTop;
     //wizard.style.pixelLeft = wizard.offsetLeft;
            //wizard.style.pixelTop = wizard.offsetTop;
                   //event.clientX,event.clientY:分别表示当前事件的鼠标在屏幕浏览区的位置
                   //wizard.style.pixelLeft,wizard.style.pixelTop: 表示指定元素的XY点的值
                   //wizard.offsetLeft | wizard.offsetLeft与
                   //  wizard.style.pixelLeft | wizard.style.pixelTop的值相同,应该在一些场合下是不同的?
                   //注意大小写,
 }
 function moveDisable(){
    canmove=false;
 }
 function move(){
    if(canmove){
     newX = (event.clientX + document.body.scrollLeft);
         newY = (event.clientY + document.body.scrollTop);
     wizard.style.pixelLeft=newX-leftX;
     wizard.style.pixelTop=newY-topY;
     event.returnValue = false;
    }
 }
 document.onmousedown=moveAble;
 document.onmouseup=moveDisable;
 document.onmousemove=move;
 window.onresize=showpx;
 showpx();//如果把这一个script段放到HTML底部,showpx可以执行正常
  </script>
  <table id="wizard" cellspacing="0" style="position:absolute;left:300;top:150;background:#EEEEEE;border:1

solid

#CCCCCC">
     <tr bgcolor="black" id="moveArea">
   <td align="right"  id="moveArea">
     <font color='white'>最新消息</font>
   </td>
   <td align="right" id="moveArea">
     <a href="#" onclick="wizard.style.display='none'"><font color='white'>[关闭]</font></a>
   </td>
      </tr>
 <tr>
   <td>
     <img src='../images/girl_s.gif'>
   </td>
   <td valign="top"><br><br>
     <a href='../news/MessView.net?IDMessage=11147'><b><font

color='red'>10月23日WINDOWS主机升级通知!</font></b><br>[2004-10-21]</a><br><a

href='../news/MessView.net?IDMessage=11060'><b><font

color='red'>CN代理价格再一次下调,低至行业之最!</font></b><br>[2004-10-18]</a><br><a

href='../news/MessView.net?IDMessage=11059'><b><font

color='red'>行业惊暴,买国家顶级CN域名送国际域名!</font></b><br>[2004-10-18]</a><br>   </td>
 </tr>
   </table>
&nbsp;&nbsp;&nbsp;
<table width='100%'>
<tr>
  <td width='20%'>
<table id=tbl2><tr><td>test1</td></tr></table>
  </td>
  <td width='20%'>
<table id=tbl1><tr><td>test2</td></tr></table>
  </td>
  <td width='20%'>
<table id=tbl3><tr><td>test3</td></tr></table>
  </td>
</tr>
</table>


注:
EVENT对象:
  button:在mousedown,mouseup,click事件中,按的是哪个键
         0-左键,1-中间键,2-右键
  altKey,ctrlKey,metaKey,shiftKey:键盘属性对任何鼠标事件都有效
  clientX,clientY:鼠标指针相对于客户区的XY坐标,不考虑文档滚动
                  如果要把窗体滚动计在内,加上document.body.scrollLeft,document.body.scrollTop即可
  screenX,screenY:鼠标指针相对于用户显示器的左上角的XY坐标的值
  type:发生事件的类型,如click,mouseover
  srcElement:发生事件的文档元素
  offsetX,offsetY:鼠标指针相对于源元素的位置,用它们可以确定点击了image的哪个像素
  keyCode:整数属性声明了keydown,keyup事件的键代码,以及keypress事件的Unicode字符,
          用String.fromCharCode()可将字符代码转换成字符串.
  fromElement:声明mouseover事件中鼠标移动过的文档元素
  toElement:mouseout事件中鼠标移动到的文档元素.
  cancelBubble:一个布尔值,设为true可以阻止当前事件进一步起泡
               与2级dom的event对象的stopPropagation()方法相同
  returnValue:布尔值,设为false可阻止浏览器执行与事件相关的默认动作
              与2级dom的event对象的preventDefault()方法
 
 

 

 

阅读全文
0 0

相关文章推荐

img
取 消
img