JavaScript 中怎麼確定滑鼠的位置?

時間 2021-05-05 17:36:30

1樓:崮生

我記錯api 了,elementFromPoint 好像是不行的,hover我有時間嘗試一下

硬要不通過事件獲取滑鼠位置呢也有乙個變通的法子DocumentOrShadowRoot.elementFromPoint() - Web APIs

這有乙個 elementFromPoint 的api,我們可以在頁面中乙個畫素放乙個div,排滿整個瀏覽器頁面。

再通過呼叫這個api返回的div就可以確定滑鼠的位置了。

我之前還利用這個api寫了乙個去除頂部遮擋的油猴指令碼https://

zhuanlan /p/142055433

突然想到似乎還可以利用css選擇器hover,貌似也是可以實現的

2樓:Eugene Hsueh

滑鼠的位置可以用很多方式來表現,這取決於座標系是什麼。相對整個螢幕、相對於瀏覽器視窗、相對於頁面、或相對於觸發滑鼠事件的元素,都會有不同的 X,Y 值

如果要獲取滑鼠位置,首先要捕捉滑鼠事件

// 比如,可以監聽滑鼠移動事件

document.addEventListener ('mousemove', showMousePosition, false

// 通過 callback 來顯示,或使用滑鼠位置引數

function showMousePosition ( event

// 相對於網頁

console.log ( 'page: ' + event.pageX + ',' + event.pageY

// 相對瀏覽器視窗

console.log ( 'client: ' + event.clientX + ',' + event.clientX

// 相對於滑鼠事件的目標元素

console.log ( 'offset: ' + event.offsetX + ',' + event.offsetY

// 相對於螢幕

console.log ( 'screen: ' + event.screenX + ',' + event.screenY

// 相對於元素所在的「層」,與是否絕對定位有關

// 另,Webkit 已經準備停止支援這個「不符標準」的引數了:http://

// 這我也不知道是什麼,似乎它總是等於 clientX/Y

console.log ( 'raw: ' + event.x + ',' + event.y

console.log ( ལ ); // sep

參考W3C DOM Compatibility - CSS Object Model View

3樓:Chris

查一下以下屬性的定義

event :

JavaScript中 ArrayBuffer 物件與 Blob 物件到底有什麼區別?

navegador 我說乙個很表面的,通常來說node比瀏覽器自由,但是瀏覽器的blob 有匹配的createObjectUrl node目前沒有直接的。這個通常看起來沒用,但是如果你不想去改底層的情況下,想實現多執行緒混合非同步分發模型的時候有用 徹底區分真非同步任務和執行緒模擬的非同步任務,然後...

javascript中Function prototype是物件還是函式

大雄 是函式我們先試一下 typeof Function function typeof Function prototype function varfn function typeoffn function typeoffn.prototype object 為什麼就這樣的,這就是因為 Func...

javascript中arguments和形參在改變值時為什麼會同步變化,不應該是值傳遞嗎?

應該是解析的問題吧,arguments 2 a,先是定義了,後是重新賦值,而且這個東西既然可以設計實驗驗證,應該就沒有什麼好糾結的吧。arguments主要是用於實現過載。 馮天然 Ecmascript5標準的10.6節有NOTE For non strict mode functions the ...