浏览器的一些位置

   首先event.clientX,event.clientY(解释可视区域显示坐标),event.screenX,event.screenY(相对屏幕左上角的坐标)是符合w3c标准的,只是在ie和moz、chrome等非ie内核的浏览器有略微的差别,先看一个例子

 

复制代码
代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
    
< title > 无标题页 </ title >
    
< style  type ="text/css" >
        #txt
        
{
            width
:  412px ;
        
}
        body
{ margin : 0 ; padding : 0 ; }
    
</ style >
</ head >
< body >
< div  style ="width:100px;height:100px; background:#dfdfdf;"  onmousemove ="ll(event)" ></ div >
    
< input  id ="txt"  type ="text"   />
< script  language ="javascript"  type ="text/javascript" >
   
// golobal
   _w = window;
   _d
= document;
   
function  $(eleid){
        
return  ( typeof  eleid == ' object ' ) ? eleid:_d.getElementById(eleid);
   }
   
function  ll(a){
       a
= a ? a:window.event;
       alert(_d.documentElement)
       $(
" txt " ).value = " clientX= " + a.clientX + " ,clientY= " + a.clientY + " ||screenX= " + a.screenX + " ,screenY= " + a.screenY;
  }
</ script >

</ body >
</ html >
复制代码

 

 

 

你鼠标放在div最上定点时,在ie显示坐标是clientX=2,clientY=2而非ie浏览器都为0,这是为什么呢?其实你看了下面的图就明白了(顺便说一下screenX,screenY就不说了字面意思,这个通用,不同浏览器没有什么不同)。

 

 浏览器的一些位置

 

原因很简单就是在ie中存在document.body.clientLeft,document.body.clientTop或者document.documentElement.clientLeft,document.documentElement.clientTop(不同的ie二者有一个值不为零,可以用),这样我们就知道刚才为什么相对于body最上角(0,0)时div的坐标不一致的原因。

 

现在我们要做一个事情,就是要就算页面中的一个div相对于body左上角 (或者是页面左上角)的坐标。通过上面的你肯定写出

x=event.clientX-document.body.clientLeft或 document.documentElement.clientLeft

y= event.clientY-document.body.clientTop或 document.documentElement.clientTop

这只是可视区域(严格的应该是可视的body区域,自己这样讲,不知道真确不?)的 还没有考虑滚动条

 

要解决上面的问题(跨浏览器计算页面左上角为参考点的 触发事件坐标) 

看下面属性

在ff中:

pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。 (pageY同理)

 

scrollTop   指滚动条滚下来时,上面被遮挡了多少 

scrollLeft   同理可以是左边被遮了多少 

 

scrollHeight  是指整个文档可以被scroll的高度 

scrollWidth   同理是指宽度 

 

获得值方式:

ie6/firefox,opera浏览器 :document.documentElement.scrollTop,

 

document.documentElement.scrollLeft

chrome:document.body.scrollTop,document.body.scrollLeft 

 

所以代码如下 :

代码
复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
    
< title > 无标题页 </ title >
< style  type ="text/css" >
    body
{ margin : 0 ; padding : 0 ; }
   .block
{ width : 300px ; height : 300px ;  background : #dfdfdf ;  text-align : center ; }
   .block div
{ width : 150px ; height : 150px ;  background : #666 ; }
   .block div div
{ width : 100px ; height : 100px ;  background : #fe0 ; }
</ style >
</ head >
< body  onclick ="alert('body')" >
< div  id ="d1"  class ="block" >  
  
< div  id ="d2"  style =" position:relative;" >
     
< div  id ="d3" ></ div >
  
</ div >
</ div >
    
< input  id ="btn"  type ="text"   />
< br  />
< br  />
< br  />
    
< script  language ="javascript"  type ="text/javascript" >
       
// golobal
       _w = window;
       _d
= document;
       _isie
=!! _w.ActiveXObject;
       _isie6
= _isie &&! _w.XMLHttpRequest;
       
function  r_e(a){
            
return  _isie ? (window.event ? window.event: null ):a;
       }
       
function  addEvent(obj,type,fun,bol){
           _isie
? obj.attachEvent( " on " + type,fun):obj.addEventListener(type,fun,bol);
       }
       
function  delEvent(obj,type,fun,bol){
            _isie
? obj.detachEvent( " on " + type,fun):obj.removeEventListener(type,fun,bol);
       }
       
function  $(eleid){
            
return  ( typeof  eleid == ' object ' ) ? eleid:_d.getElementById(eleid);
       }
       
       
       
function  getMouseXY(ev){
          
// alert(ev);
           if ( ! _isie){
             
return  {x:ev.pageX,
                     y:ev.pageY
                     };
          }
else {
             
var  sleft =! parseInt(document.body.scrollLeft) ? document.documentElement.scrollLeft - document.documentElement.clientLeft:(document.body.scrollLeft - document.body.clientLeft);
             
var  stop =! parseInt(document.body.scrollTop) ? document.documentElement.scrollTop - document.documentElement.clientTop:(document.body.scrollTop - document.body.clientTop);
             
return  {
                       x:event.clientX 
+  sleft  -  document.body.clientLeft,
                       y:event.clientY 
+  stop  -  document.body.clientTop
                    };  
          }
       }
       
       
function  ll2(event){
          
// alert(event);
           var  xy = getMouseXY(event);
          $(
" btn " ).value = " x= " + xy.x + " ,y= " + xy.y;
       }

       addEvent($(
" d1 " ), ' mousemove ' , function (event){ var  s = event;ll2(s);}, false );

    
</ script >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
    
< p >
        
&nbsp; </ p >
</ body >
</ html >
复制代码

 

接下来如果你像了解event.x(ie),layerX,offsetLeft,offsetY请转(这几篇文章不错,其实关键是哪个图看懂了基本上都没问题了)

www.aspxcs.net/HTML/164930449.html

www.w3school.com.cn/htmldom/dom_obj_event.asp

www.jb51.net/article/22507.htm 

 

你可能感兴趣的:(浏览器)