javascript坐標:event.x、event.clientX、event.offsetX、event.screenX 用法


clientX 設置或獲取鼠標指針位置相對於窗口客戶區域的 x 坐標,其中客戶區域不包括窗口自身的控件和滾動條。

clientY 設置或獲取鼠標指針位置相對於窗口客戶區域的 y 坐標,其中客戶區域不包括窗口自身的控件和滾動條。
offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 坐標。
offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 坐標。
screenX 設置或獲取獲取鼠標指針位置相對於用戶屏幕的 x 坐標。
screenY 設置或獲取鼠標指針位置相對於用戶屏幕的 y 坐標。
x 設置或獲取鼠標指針位置相對於父文檔的 x 像素坐標。
y 設置或獲取鼠標指針位置相對於父文檔的 y 像素坐標。
 
event.clientX返回事件發生時,mouse相對於客戶窗口的X坐標,event.X也一樣。但是如果設置事件對象的定位屬性值為relative,event.clientX不變,而event.X返回事件對象的相對於本體的坐標。
 
  
  代碼如下  
<script>
var  strInfo= "" ;
strInfo+= "rn網頁可見區域寬:" +document.body.clientWidth;
strInfo+= "rn網頁可見區域高:" +document.body.clientHeight;
strInfo+= "rn網頁可見區域寬:" +document.body.offsetWidth+ "(包括邊線的寬)" ;
strInfo+= "rn網頁可見區域高:" +document.body.offsetHeight+ "(包括邊線的寬)" ;
strInfo+= "rn網頁正文全文寬:" +document.body.scrollWidth;
strInfo+= "rn網頁正文全文高:" +document.body.scrollHeight;
strInfo+= "rn網頁被卷去的高:" +document.body.scrollTop;
strInfo+= "rn網頁被卷去的左:" +document.body.scrollLeft;
strInfo+= "rn網頁正文部分上:" +window.screenTop;
strInfo+= "rn網頁正文部分左:" +window.screenLeft;
strInfo+= "rn屏幕分辨率的高:" +window.screen.height;
strInfo+= "rn屏幕分辨率的寬:" +window.screen.width;
strInfo+= "rn屏幕可用工作區高度:" +window.screen.availHeight;
strInfo+= "rn屏幕可用工作區寬度:" +window.screen.availWidth;
window.confirm(strInfo);
</script>
 
x:設置或者是得到鼠標相對於目標事件的父元素的外邊界在x坐標上的位置。
clientX:相對於客戶區域的x坐標位置,不包括滾動條,就是正文區域。
offsetx:設置或者是得到鼠標相對於目標事件的父元素的內邊界在x坐標上的位置。
screenX:相對於用戶屏幕
  代碼如下
 
<table border=1 cellpadding=15 cellspacing=15 style= "position:relative;left:100;top:100" >
<tr><td>
<div onclick= "show()"  style= "background:silver;cursor:hand" >
Click here to show.
</div>
</td></tr>
</table>
<script>
function  show(){
alert( "window.event.x:" +window.event.x+ "nwindow.event.y:" +window.event.y+ "nevent.clientX:" +event.clientX+ "nevent.clientY:" +event.clientY+ "nevent.offsetX:" +event.offsetX+ "nevent.offsetY:" +event.offsetY+ "nwindow.event.screenX:" +window.event.screenX+ "nwindow.event.screenY:" +window.event.screenY);
}
</script>
 
   event.clientX返回事件發生時,mouse相對於客戶窗口的X坐標
    event.X也一樣
    但是如果設置事件對象的定位屬性值為relative
    event.clientX不變
    而event.X返回事件對象的相對於本體的坐標
    event對象詳解 ICOOE 2000.3.31 http: //www.hzhuti.com
    event代表事件的狀態,例如事件發生的的元素、鼠標的位置等等,event對象只在事件過程中才有效。
    
    event屬性:
    
    altKey
    檢索ALT鍵的當前狀態
    可能的值  true 為關閉
    false 為不關閉
    
    button
    檢索按下的鼠標鍵
    可能的值: 0 沒按鍵
    1 按左鍵
    2 按右鍵
    3 按左右鍵
    4 按中間鍵
    5 按左鍵和中間鍵
    6 按右鍵和中間鍵
    7 按所有的鍵
    
    cancelBubble
    設置或檢索當前事件是否將事件句柄起泡
    可能的值:  false  啟用起泡
    true  取消該事件起泡
    
    clientX
    檢索與窗口客戶區域有關的鼠標光標的X坐標,屬性為只讀,沒有默認值。
    
    clientY
    檢索與窗口客戶區域有關的鼠標光標的Y坐標,屬性為只讀,沒有默認值。
    
    ctrlKey
    ctrlKey 檢索CTRL鍵的當前狀態
    可能的值  true 為關閉
    false 為不關閉
    
    dataFld
    檢索被oncellchange事伯影響的列
    
    aTransfer
    為拖放操作提供預先定義的剪貼板式。
    
    Element
    檢索在on mouseover和on mouseout事件期間退出的對象指針
    
    keyCode
    設置或檢索與引發事件的關鍵字相關聯的Unicode關鍵字代碼
    該屬性與onkeydown onkeyup onkeypress一起使用
    如果沒有引發事件的關鍵字,則該值為0
    
    offsetX
    檢索與觸發事件的對象相關的鼠標位置的水平坐標
    
    offsetY
    檢索與觸發事件的對象相關的鼠標位置的垂直坐標
    
    propertyName
    檢索在對象上己更改的特性的名稱
    
    reason
    檢索數據源對象數據傳輸的結果
    可能的值:
    0 數據傳輸成功
    1 數據傳輸失敗
    2 數據傳輸錯誤
    
    recordset
    檢索數據源對象中默認記錄集的引用
    該特性為只讀
    
    repeat
    檢索一個事件是否被重復
    該屬性只有在onkeydown事件重復時才返回 true
    
    returnvalues
    設置或檢索從事件中返回的值
    可能的值:
    true  事件中的值被返回
    false  源對象上事件的默認操作被取消
    
    screenX
    檢索與用戶屏相關的鼠標的水平位置
    
    screenY
    檢索與用戶屏相關的鼠標的垂直位置
    
    shiftKey
    檢索shiftKey鍵的當前狀態
    可能的值  true 為關閉
    false 為不關閉
    
    srcElement
    檢索觸發事件的對象
    
    srcFilter
    檢索導致onfilterchange事件觸發的過濾器對象
    
    srcUm
    檢索觸發事件行為的同一資源名稱
    除非下面兩個條件都為真,否則該特性被設置為 null
    1.行為被附加到觸發事件的要素上
    2.在前面的項目符號中定義的行為己指定了一個URN標識符和己觸發的事件
    
    toElement
    檢索作為on mouseover或者on mouseout事件結果而移動的對象
    
    type
    檢索事件對象中的事件名稱
    
    x
    檢索相對於父要素鼠標水平坐標的整數
    
    y
    檢索相對於父要素鼠標垂直坐標的整數


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM