1.PageX/PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
2.clientX/clientY:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.
可是悲劇的是,PageX只有FF特有,IE這個悲劇沒有啊T_T,所以大牛們想出了一個辦法
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
3.screenX/screenY：鼠標在屏幕上的位置,從屏幕左上角開始（w3c標准）
4.offsetX/offsetY:IE特有,鼠標相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值
5.
layerX/layerY：FF特有,鼠標相比較於當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的左上角為參考點也就是當觸發元素設置了相對或者絕對定位后,layerX和offsetX就幸福地生活在一起^-^,幾乎相等,唯一不同就是一個從border為參考點,一個以內容為參考點
chrome和safari一條龍通殺!完全支持所有屬性.其中(offsetX和layerX都是以border為參考點)
下面這個是獲取相對於屏幕的坐標
document.onmousemove=function(e){e=e? e:window.event;document.writeln("X:"+e.screenX+"Y:"+e.screenY);}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_0922w.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function getScreen(event) {
document.getElementById("container").innerHTML = event.offsetX + " , " + event.offsetX;
}
</script>
<style>
#container {
left:0px;
bottom:0px;
text-align:left;
width:293px;
height:190px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div onmousemove="getScreen(event)" id="container">
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/1152165471 - 副本.jpg" />
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
