vue 滑鼠座標

2021-09-25 10:21:29 字數 1174 閱讀 8806

方法介紹

關於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型別的...