資訊專欄INFORMATION COLUMN
摘要：相對瀏覽器窗口簡單代碼即可實現(xiàn)，然而這是還不夠，因為絕大多數(shù)情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標，的，屬性分別表示鼠標點擊位置相對于文檔的左邊距，上邊距。
在一些DOM操作中我們經(jīng)常會跟元素的位置打交道，鼠標交互式一個經(jīng)常用到的方面，令人失望的是不同的瀏覽器下會有不同的結(jié)果甚至是有的瀏覽器下沒結(jié)果，這篇文章就上鼠標點擊位置坐標獲取做一些簡單的總結(jié)，沒特殊聲明代碼在IE8，F(xiàn)ireFox，Chrome下進行測試兼容
方法介紹關(guān)于js鼠標事件綜合各大瀏覽器能獲取到坐標的屬性總共以下五種：
event.clientX/Y
event.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y
clientX/YclientX/Y獲取到的是觸發(fā)點相對瀏覽器可視區(qū)域左上角距離，不隨頁面滾動而改變。
兼容性：所有瀏覽器均支持
pageX/Y獲取到的是觸發(fā)點相對文檔區(qū)域左上角距離，會隨著頁面滾動而改變
兼容性：除IE6/7/8不支持外，其余瀏覽器均支持
offsetX/Y獲取到是觸發(fā)點相對被觸發(fā)dom的左上角距離，不過左上角基準點在不同瀏覽器中有區(qū)別，其中在IE中以內(nèi)容區(qū)左上角為基準點不包括邊框，如果觸發(fā)點在邊框上會返回負值，而chrome中以邊框左上角為基準點。
兼容性：IE所有版本，chrome，Safari均完美支持，F(xiàn)irefox不支持
layerX/YlayerX/Y獲取到的是觸發(fā)點相對被觸發(fā)dom左上角的距離，數(shù)值與offsetX/Y相同，這個變量就是firefox用來替代offsetX/Y的，基準點為邊框左上角，但是有個條件就是，被觸發(fā)的dom需要設(shè)置為position:relative或者position:absolute，否則會返回相對html文檔區(qū)域左上角的距離。
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/YscreenX/Y獲取到的是觸發(fā)點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。
兼容性：所有瀏覽器均支持
一張圖來解釋，如圖所示：
如果是涉及到鼠標點擊確定位置相對比較簡單，獲取到鼠標點擊事件后，事件screenX，screenY獲取的是點擊位置相對于屏幕的左邊距與上邊距，不考慮iframe因素，不同瀏覽器下表現(xiàn)的還算一致。
function getMousePos(event) {
var e = event || window.event;
return {"x":e.screenX,"y":screenY}
}
相對瀏覽器窗口
簡單代碼即可實現(xiàn)，然而這是還不夠，因為絕大多數(shù)情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標，event的clientX，clientY屬性分別表示鼠標點擊位置相對于文檔的左邊距，上邊距。于是類似的我們寫出了這樣的代碼
function getMousePos(event) {
var e = event || window.event;
return {"x":e.clientX,"y":clientY}
}
相對文檔
簡單測試也沒什么問題，但是clientX與clientY獲取的是相對于當前屏幕的坐標，忽略頁面滾動因素，這在很多條件下很有用，但當我們需要考慮頁面滾動，也就是相對于文檔（body元素）的坐標時怎么辦呢？加上滾動的位移就可以了，下邊我們試試怎么計算頁面滾動的位移。
其實在Firefox下問題會簡單很多，因為Firefox支持屬性pageX,與pageY屬性，這兩個屬性已經(jīng)把頁面滾動計算在內(nèi)了。
在Chrome可以通過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移，而在IE下可以通過document.documentElement.scrollLeft ，document.documentElement.scrollTop
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert("x: " + x + "
y: " + y);
return { "x": x, "y": y };
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85428.html
摘要：什么是，文檔對象模型。是萬維網(wǎng)聯(lián)盟的標準，定義了訪問和文檔的標準。在的標準中，是獨于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容結(jié)構(gòu)和樣式。獲取到的是觸發(fā)點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。 什么是DOM? DOM，文檔對象模型（Document Object Model）。DOM是 W3C（萬維網(wǎng)聯(lián)盟）的標準，DOM定義了訪問HTML和XML文檔的標準。...
摘要：布爾值表示捕獲階段調(diào)用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調(diào)函數(shù)。對象會被作為第一個參數(shù)傳遞給事件監(jiān)聽的回調(diào)函數(shù)。布爾默認值是，當設(shè)置成時用以取消事件的默認行為與中的相同。 其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當時寫了一大堆，結(jié)果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補充下了，也正好給我的javascript學(xué)習(xí)總結(jié)做...
摘要：意為偏移量，是被點擊的元素距左上角為參考原點的長度，而和的參考點有所差異。下，是包含邊框的，如圖所示。而是不包含邊框的，如果鼠標進入到區(qū)域，為返回負值，如圖所示。 offsetX,offsetY offset意為偏移量，是被點擊的元素距左上角為參考原點的長度，而IE、FF和Chrome的參考點有所差異。 Chrome下，offsetX offsetY是包含邊框的，如圖所示。showIm...
摘要：返回事件發(fā)生時，鼠標指針相對于瀏覽器窗口可視區(qū)域的水平垂直窗口坐標?？梢晠^(qū)域不包括工具欄和滾動條，事件和標準事件都定義了這個屬性返回鼠標指針的位置，類似于，但它們使用的是文檔坐標而非窗口坐標。是相對于被點擊了的元素。 e.clientX,e.clientY返回事件發(fā)生時，鼠標指針相對于瀏覽器窗口可視區(qū)域的水平（垂直）窗口坐標?？梢晠^(qū)域不包括工具欄和滾動條，IE事件和標準事件都定義了這2...
摘要：返回事件發(fā)生時，鼠標指針相對于瀏覽器窗口可視區(qū)域的水平垂直窗口坐標?？梢晠^(qū)域不包括工具欄和滾動條，事件和標準事件都定義了這個屬性返回鼠標指針的位置，類似于，但它們使用的是文檔坐標而非窗口坐標。是相對于被點擊了的元素。 e.clientX,e.clientY返回事件發(fā)生時，鼠標指針相對于瀏覽器窗口可視區(qū)域的水平（垂直）窗口坐標?？梢晠^(qū)域不包括工具欄和滾動條，IE事件和標準事件都定義了這2...
閱讀 3681·2021-11-24 10:25
閱讀 2678·2021-11-24 09:38
閱讀 1304·2021-09-08 10:41
閱讀 3075·2021-09-01 10:42
閱讀 2726·2021-07-25 21:37
閱讀 2058·2019-08-30 15:56
閱讀 978·2019-08-30 15:55
閱讀 2815·2019-08-30 15:54
