javascript 事件對象 坐標(biāo)事件說明
更新時間：2010年05月31日 23:21:18 作者：
javascript 事件對象 坐標(biāo)事件說明，學(xué)習(xí)js坐標(biāo)事件的朋友可以參考下。
測試瀏覽器的版本:
IETester 6 ,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0
先來看看各個主流瀏覽器都有哪些坐標(biāo)屬性以及它們的意義
在IE中
event.offsetX
event.offsetY
相對于e.srcElement坐標(biāo)
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)。
event.clientX
event.clientY
總是相對于視口
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
event.x
event.y
雖然手冊上說是相對于文檔，但是ie6/7 中,他們倆的值跟clientX,clientY一致
但是這并不是嚴重的問題，因為視口相對坐標(biāo)加上滾動條已卷去高度，依然可以得到真實的x(y),這個問題在ie8的標(biāo)準模式下被解決
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 x 像素坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)。
event.screenX
event.screenY
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 x 坐標(biāo)。
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 y 坐標(biāo)。
在FireFox中
event.layerX
event.layerY
相對于e.srcElement坐標(biāo)
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)。
event.clientX
event.clientY
總是相對于視口
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
event.pageX
event.pageY
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 x 像素坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)。
event.screenX
event.screenY
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 x 坐標(biāo)。
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 y 坐標(biāo)。
實際上IE和Firefox已經(jīng)囊括了所有的屬性，其他的瀏覽器將這些屬性進行了組合，但是意義完全一致
Chrome 和 Safari
Chrome和Safari這哥倆辦事兒則灰常周全，它們收錄了所有的坐標(biāo)屬性，包括
event.offsetX
event.offsetY
event.layerX
event.layerY
event.clientX
event.clientY
event.x
event.y
event.pageX
event.pageY
注意:Chrome和Safari的event.x event.y 跟IE6 7 的表現(xiàn)一致，它們和event.clientX,event.clientY相等
Opera堅定的走了ie6 7的道路，它擁有
event.offsetX
event.offsetY
event.clientX
event.clientY
event.x
event.y
差點就和ie一模一樣，幸好它有pageX,pageY
event.pageX
event.pageY
注意:Chrome和Safari,以及 Opera 的event.x event.y 都跟IE6 7 的表現(xiàn)一致，它們和event.clientX,event.clientY相等，
而在ie8中，event.x,event.y 則等同于 其他瀏覽器的event.pageX,event.pageY
為啥米layerX和offsetX, x,和pageX會在某些瀏覽器里重復(fù)出現(xiàn)捏？
因為W3C并沒有標(biāo)準化這些屬性，DOM3草案里MouseEvent部分沿用了DOM2的定義，只有兩對屬性
clientX of type long, readonly
The horizontal coordinate at which the event occurred relative to the viewport associated with the event.
clientY of type long, readonly
The vertical coordinate at which the event occurred relative to the viewport associated with the event
screenX of type long, readonly
The horizontal coordinate at which the event occurred relative to the origin of the screen coordinate system.
screenY of type long, readonly
The vertical coordinate at which the event occurred relative to the origin of the screen coordinate system.
這下杯具了，所以支持標(biāo)準的瀏覽器們都木有了方向，但是吧，瀏覽器廠商轉(zhuǎn)念一想，W3C反正也弄不出幺蛾子來，肯定從offsetXY 和 layerXY,
pageXY 和 xy中間挑一個，于是為了迎合標(biāo)準，就把這兩對屬性就都放進了瀏覽器中。
不管怎么樣，出了問題總是要解決掉?？吹缴厦娴募嫒輬蟾?，代碼雛形也就做好了
我們開始動手寫！
getEventCoord
1 var getEventCoord = function( e )
2 {
3 var evt = e||event;
4 var html = document.documentElement; //滾動條在<HTML>上
5 return {
6
7 //如果pageX屬性為真 就使用pageX,否則就使用 clientX + html.scrollLeft
8 pageX : evt.pageX || evt.clientX + html.scrollLeft,
9
10 //如果pageY屬性為真 就使用pageY,否則就使用 clientY + html.scrollTop
11 pageY : evt.pageY || evt.clientY + html.scrollTop,
12
13 //clientX Y 大家都一致，木有懸念
14 clientX : evt.clientX,
15 clientY : evt.clientY,
16
17 //如果layerX屬性為真 就使用layerX,否則就使用 offsetX
18 layerX : evt.layerX || evt.offsetX,
19
20 //如果layerY屬性為真 就使用layerY,否則就使用 offsetY
21 layerY : evt.layerY || evt.offsetY
22 }
23 }
用法如下
document.onmousemove = function( e )
{
var coord = getEventCoord(e);
document.title = [coord.pageX,coord.pageY];
}
看起來已經(jīng)灰常的OK，似乎已經(jīng)能滿足日常工作需要了，但還是存在幾個問題
1.不嚴謹
使用 evt.pageX || evt.clientX + html.scrollLeft 這種判斷，
只要evt.pageX 等于 undefined,null,NaN,'',0,false 這些值，左邊的表達式結(jié)果就為false,從而計算右邊的表達式并返回表達式的值，
而evt.pageX本身就是有機會返回0的。所以這條判斷應(yīng)該改為
typeof evt.pageX == 'number' ? evt.pageX : evt.clientX + html.scrollLeft
pageX是個數(shù)字的時候我們才使用它
2.無法工作在怪異模式中
什么是怪異模式?
IE為了兼容IE56之前版本，在ie6中引入了兩種渲染模式： 怪異模式(Quicks Mode) 和 標(biāo)準模式 (Standards Mode)
兩種模式差異主要集中在css的盒模型解釋方面，而BOM中。則是滾動條的依賴對象發(fā)生了變化
在怪異模式中，滾動條是body的，如果想取得頁面的滾動卷去的高度和寬度，需要使用document.body.scrollTop
而標(biāo)準模式中需要使用document.documentElement.scrollTop
而兩種模式的切換方式主要是由doctype來確定，參見：http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/
從ie6開始，ie使用一個屬性 document.compatMode 來檢測文檔是否切換到了怪異模式還是處在標(biāo)準模式
如果document.compatMode的值
為BackCompat：就是在怪癖模式下
為CSS1Compat：就是在標(biāo)準模式下
所以這里為了在兩個模式中都工作正常，
我們需要判斷document.compatMode是哪個模式
而判斷的方式也很簡單，只需要判斷compatMode的值的第一個字母是否為b，就可以選擇scrollTop的依賴對象
判斷方式可以這么寫
document.compatMode.indexOf('b')==0
也可以用正則寫
/^b/i.test( document.compatMode )
第二種顯得更牛x一點。。嗯，就用第二種（實際上第一種性能好一點）
現(xiàn)在再來寫第二版吧
代碼
var getEventCoord = function( e )
{
var evt = e||event, d = document,
scrollEl = /^b/i.test( d.compatMode ) ? d.body : d.documentElement,
supportPage = typeof evt.pageX == 'number',
supportLayer = typeof evt.layerX == 'number'
return {
pageX : supportPage ? evt.pageX : evt.clientX + scrollEl.scrollLeft,
pageY : supportPage ? evt.pageY : evt.clientY + scrollEl.scrollTop,
clientX : evt.clientX,
clientY : evt.clientY,
layerX : supportLayer ? evt.layerX : evt.offsetX,
layerY : supportLayer ? evt.layerY : evt.offsetY
}
}
噔噔噔噔，這就搞定了，這個函數(shù)能干啥哩，首先想到的就是拖拽，讓我們寫一個小小的拖拽函數(shù)驗證一下下
代碼
function dragMe( o )
{
var supportCapt = !!o.setCapture;
o.onmousedown = function(e)
{
var coord = getEventCoord(e), x = coord.layerX, y = coord.layerY;
if( supportCapt ) o.setCapture();
document.onmousemove = function(e)
{
var coord = getEventCoord(e);
o.style.left = coord.pageX - x + 'px';
o.style.top = coord.pageY - y + 'px';
}
document.onmouseup = function()
{
this.onmousemove = this.onmouseup = null;
if( supportCapt ) o.releaseCapture();
}
}
}
dragMe( document.getElementById('block') );
例子
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
IETester 6 ,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0
先來看看各個主流瀏覽器都有哪些坐標(biāo)屬性以及它們的意義
在IE中
event.offsetX
event.offsetY
相對于e.srcElement坐標(biāo)
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)。
event.clientX
event.clientY
總是相對于視口
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
event.x
event.y
雖然手冊上說是相對于文檔，但是ie6/7 中,他們倆的值跟clientX,clientY一致
但是這并不是嚴重的問題，因為視口相對坐標(biāo)加上滾動條已卷去高度，依然可以得到真實的x(y),這個問題在ie8的標(biāo)準模式下被解決
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 x 像素坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)。
event.screenX
event.screenY
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 x 坐標(biāo)。
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 y 坐標(biāo)。
在FireFox中
event.layerX
event.layerY
相對于e.srcElement坐標(biāo)
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)。
event.clientX
event.clientY
總是相對于視口
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
event.pageX
event.pageY
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 x 像素坐標(biāo)。
設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)。
event.screenX
event.screenY
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 x 坐標(biāo)。
設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 y 坐標(biāo)。
實際上IE和Firefox已經(jīng)囊括了所有的屬性，其他的瀏覽器將這些屬性進行了組合，但是意義完全一致
Chrome 和 Safari
Chrome和Safari這哥倆辦事兒則灰常周全，它們收錄了所有的坐標(biāo)屬性，包括
event.offsetX
event.offsetY
event.layerX
event.layerY
event.clientX
event.clientY
event.x
event.y
event.pageX
event.pageY
注意:Chrome和Safari的event.x event.y 跟IE6 7 的表現(xiàn)一致，它們和event.clientX,event.clientY相等
Opera堅定的走了ie6 7的道路，它擁有
event.offsetX
event.offsetY
event.clientX
event.clientY
event.x
event.y
差點就和ie一模一樣，幸好它有pageX,pageY
event.pageX
event.pageY
注意:Chrome和Safari,以及 Opera 的event.x event.y 都跟IE6 7 的表現(xiàn)一致，它們和event.clientX,event.clientY相等，
而在ie8中，event.x,event.y 則等同于 其他瀏覽器的event.pageX,event.pageY
為啥米layerX和offsetX, x,和pageX會在某些瀏覽器里重復(fù)出現(xiàn)捏？
因為W3C并沒有標(biāo)準化這些屬性，DOM3草案里MouseEvent部分沿用了DOM2的定義，只有兩對屬性
clientX of type long, readonly
The horizontal coordinate at which the event occurred relative to the viewport associated with the event.
clientY of type long, readonly
The vertical coordinate at which the event occurred relative to the viewport associated with the event
screenX of type long, readonly
The horizontal coordinate at which the event occurred relative to the origin of the screen coordinate system.
screenY of type long, readonly
The vertical coordinate at which the event occurred relative to the origin of the screen coordinate system.
這下杯具了，所以支持標(biāo)準的瀏覽器們都木有了方向，但是吧，瀏覽器廠商轉(zhuǎn)念一想，W3C反正也弄不出幺蛾子來，肯定從offsetXY 和 layerXY,
pageXY 和 xy中間挑一個，于是為了迎合標(biāo)準，就把這兩對屬性就都放進了瀏覽器中。
不管怎么樣，出了問題總是要解決掉?？吹缴厦娴募嫒輬蟾?，代碼雛形也就做好了
我們開始動手寫！
getEventCoord
復(fù)制代碼 代碼如下:
1 var getEventCoord = function( e )
2 {
3 var evt = e||event;
4 var html = document.documentElement; //滾動條在<HTML>上
5 return {
6
7 //如果pageX屬性為真 就使用pageX,否則就使用 clientX + html.scrollLeft
8 pageX : evt.pageX || evt.clientX + html.scrollLeft,
9
10 //如果pageY屬性為真 就使用pageY,否則就使用 clientY + html.scrollTop
11 pageY : evt.pageY || evt.clientY + html.scrollTop,
12
13 //clientX Y 大家都一致，木有懸念
14 clientX : evt.clientX,
15 clientY : evt.clientY,
16
17 //如果layerX屬性為真 就使用layerX,否則就使用 offsetX
18 layerX : evt.layerX || evt.offsetX,
19
20 //如果layerY屬性為真 就使用layerY,否則就使用 offsetY
21 layerY : evt.layerY || evt.offsetY
22 }
23 }
用法如下
復(fù)制代碼 代碼如下:
document.onmousemove = function( e )
{
var coord = getEventCoord(e);
document.title = [coord.pageX,coord.pageY];
}
看起來已經(jīng)灰常的OK，似乎已經(jīng)能滿足日常工作需要了，但還是存在幾個問題
1.不嚴謹
使用 evt.pageX || evt.clientX + html.scrollLeft 這種判斷，
只要evt.pageX 等于 undefined,null,NaN,'',0,false 這些值，左邊的表達式結(jié)果就為false,從而計算右邊的表達式并返回表達式的值，
而evt.pageX本身就是有機會返回0的。所以這條判斷應(yīng)該改為
typeof evt.pageX == 'number' ? evt.pageX : evt.clientX + html.scrollLeft
pageX是個數(shù)字的時候我們才使用它
2.無法工作在怪異模式中
什么是怪異模式?
IE為了兼容IE56之前版本，在ie6中引入了兩種渲染模式： 怪異模式(Quicks Mode) 和 標(biāo)準模式 (Standards Mode)
兩種模式差異主要集中在css的盒模型解釋方面，而BOM中。則是滾動條的依賴對象發(fā)生了變化
在怪異模式中，滾動條是body的，如果想取得頁面的滾動卷去的高度和寬度，需要使用document.body.scrollTop
而標(biāo)準模式中需要使用document.documentElement.scrollTop
而兩種模式的切換方式主要是由doctype來確定，參見：http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/
從ie6開始，ie使用一個屬性 document.compatMode 來檢測文檔是否切換到了怪異模式還是處在標(biāo)準模式
如果document.compatMode的值
為BackCompat：就是在怪癖模式下
為CSS1Compat：就是在標(biāo)準模式下
所以這里為了在兩個模式中都工作正常，
我們需要判斷document.compatMode是哪個模式
而判斷的方式也很簡單，只需要判斷compatMode的值的第一個字母是否為b，就可以選擇scrollTop的依賴對象
判斷方式可以這么寫
document.compatMode.indexOf('b')==0
也可以用正則寫
/^b/i.test( document.compatMode )
第二種顯得更牛x一點。。嗯，就用第二種（實際上第一種性能好一點）
現(xiàn)在再來寫第二版吧
代碼
復(fù)制代碼 代碼如下:
var getEventCoord = function( e )
{
var evt = e||event, d = document,
scrollEl = /^b/i.test( d.compatMode ) ? d.body : d.documentElement,
supportPage = typeof evt.pageX == 'number',
supportLayer = typeof evt.layerX == 'number'
return {
pageX : supportPage ? evt.pageX : evt.clientX + scrollEl.scrollLeft,
pageY : supportPage ? evt.pageY : evt.clientY + scrollEl.scrollTop,
clientX : evt.clientX,
clientY : evt.clientY,
layerX : supportLayer ? evt.layerX : evt.offsetX,
layerY : supportLayer ? evt.layerY : evt.offsetY
}
}
噔噔噔噔，這就搞定了，這個函數(shù)能干啥哩，首先想到的就是拖拽，讓我們寫一個小小的拖拽函數(shù)驗證一下下
代碼
復(fù)制代碼 代碼如下:
function dragMe( o )
{
var supportCapt = !!o.setCapture;
o.onmousedown = function(e)
{
var coord = getEventCoord(e), x = coord.layerX, y = coord.layerY;
if( supportCapt ) o.setCapture();
document.onmousemove = function(e)
{
var coord = getEventCoord(e);
o.style.left = coord.pageX - x + 'px';
o.style.top = coord.pageY - y + 'px';
}
document.onmouseup = function()
{
this.onmousemove = this.onmouseup = null;
if( supportCapt ) o.releaseCapture();
}
}
}
dragMe( document.getElementById('block') );
例子
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JS實現(xiàn)響應(yīng)鼠標(biāo)點擊動畫漸變彈出層效果代碼
這篇文章主要介紹了JS實現(xiàn)響應(yīng)鼠標(biāo)點擊動畫漸變彈出層效果代碼,具有非常自然流暢的動畫過度效果,涉及JavaScript針對鼠標(biāo)事件的響應(yīng)及頁面元素樣式的動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-03-03
javascript中直接引用Microsoft的COM生成Word
直接引用Microsoft的COM是可以生成Word的，下面為大家介紹下實現(xiàn)的javascript代碼2014-01-01
javaScript之split與join的區(qū)別(詳解)
下面小編就為大家?guī)硪黄猨avaScript之split與join的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了JS列表頁面隔行變色簡單實現(xiàn)，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單打地鼠游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript中關(guān)于iframe滾動條的去除和保留
在開發(fā)中經(jīng)常遇到去掉全部的滾動條，去掉右邊的滾動條且保留底下的滾動條，去掉底下的滾動條且保留右邊的滾動條，大家基于js是怎么實現(xiàn)的呢？下面小編通過本文給大家詳細介紹下，對js iframe滾動條相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09![JavaScript 字符串與數(shù)組轉(zhuǎn)換函數(shù)[不用split與join]](http://img.jbzj.com/images/xgimg/bcimg7.png)
JavaScript 字符串與數(shù)組轉(zhuǎn)換函數(shù)[不用split與join]
下面的代碼，不考慮他的運行效率的話，思路不錯，大家可以看看，但在實際的應(yīng)用中，我們?nèi)匀皇褂胹plit或join來實現(xiàn)數(shù)組的操作。2009-12-12
之前發(fā)了不少了去除字符串空格的代碼，但都是去除開始與結(jié)尾的，下面的這段代碼可以去除中間的。2009-08-08
本文為大家介紹下如何改變隱藏的input中value的值，一句代碼就可以實現(xiàn)，感性的朋友可以參考下2013-12-12