1. 程式人生 > >javascript座標:event.x、event.clientX、event.offsetX、event.screenX 用法

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
檢索相對於父要素滑鼠垂直座標的整數