方法介紹
關於js滑鼠事件獲取到座標的屬性總共以下五種:
event.clientx/y
event.pagex/y
event.offsetx/y
event.layerx/y
event.screenx/y
clientx/y
clientx/y獲取到的是觸發點相對瀏覽器可視區域左上角距離,不隨頁面滾動而改變。
相容性:所有瀏覽器均支援
pagex/y
pagex/y獲取到的是觸發點相對文件區域左上角距離,會隨著頁面滾動而改變
相容性:除ie6/7/8不支援外,其餘瀏覽器均支援
offsetx/y
offsetx/y獲取到是觸發點相對被觸發dom的左上角距離,不過左上角基準點在不同瀏覽器中有區別,其中在ie中以內容區左上角為基準點不包括邊框,如果觸發點在邊框上會返回負值,而chrome中以邊框左上角為基準點。
相容性:ie所有版本,chrome,safari均完美支援,firefox不支援
layerx/y
layerx/y獲取到的是觸發點相對被觸發dom左上角的距離,數值與offsetx/y相同,這個變數就是firefox用來替代offsetx/y的,基準點為邊框左上角,但是有個條件就是,被觸發的dom需要設定為position:relative或者position:absolute,否則會返回相對html文件區域左上角的距離。
相容性:ie6/7/8不支援,opera不支援,ie9/10和chrome、safari均支援
screenx/y
screenx/y獲取到的是觸發點相對顯示器螢幕左上角的距離,不隨頁面滾動而改變。
相容性:所有瀏覽器均支援
先用一張圖來解釋,如圖所示:
這裡我們主要使用screenx/y、clientx/y和offsetx/y這三個
eg:
//相對於螢幕
function getmousepos(event)
}
獲取當前元素的座標
function getmousepos(event)
}
HTML 滑鼠座標和元素座標
在這一篇文章中,將會介紹滑鼠座標 元素座標以及滑鼠在指定元素內的座標。獲取的座標可分為2種 1 mouseevent.screenx mouseevent.screeny 基於螢幕的x y座標 以螢幕的左上角為0,0起始點。2 mouseevent.clientx mouseevent.client...
獲取滑鼠座標GetCursorPos
下面這個例子是獲取螢幕的座標 include includelresult callback windowproc hwnd hwnd,handle to window uint umsg,message identifier wparam wparam,first message paramete...
c 獲取滑鼠座標
很多時候我們需要用到滑鼠在相對於窗體上的座標,或者相對於螢幕的座標,這裡就把我的經驗記錄下。用control.mouseposition獲得當前滑鼠的座標currentpoint,使用control.pointtoclient方法,前面獲得的currentpoint作為其引數,返回的point型別的...