clientX
只读特性在
MouseEvent
interface provides the horizontal coordinate within the application's client area at which the event occurred (as opposed to the coordinate within the page).
For example, clicking on the left edge of the client area will always result in a mouse event with a
clientX
value of
0
, regardless of whether the page is scrolled horizontally.
var x = instanceOfMouseEvent.clientX
A
double
floating point value, as redefined by the CSSOM View Module. Originally, this property was defined as a
long
integer. See the "Browser compatibility" section for details.
This example displays your mouse's coordinates whenever you trigger the
mousemove
事件。
<p>Move your mouse to see its position.</p> <p id="screen-log"></p>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Screen X/Y: ${e.screenX}, ${e.screenY}
Client X/Y: ${e.clientX}, ${e.clientY}`;
}
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
clientX
|
Chrome 1 | Edge 12 | Firefox 1 | IE 9 | Opera 10.6 | Safari 3.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 11 | Safari iOS 2 | Samsung Internet Android 1.0 |
Value type changed from
long
to
double
|
Chrome 56 | Edge ≤79 | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android 56 | Chrome Android 56 | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android 6.0 |
完整支持
兼容性未知
MouseEvent