javascript座標:event.x、event.clientX、event.offsetX、event.screenX

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.