Gets a summary of mouse position related properties in JavaScript
- 2020-03-30 04:05:21
- OfStack
Javascript does not have a mouse object, and it relies on a powerful event object to get mouse coordinates.
We can get the mouse position in real time by listening to the document's mousemove.
But!!!!! There are too many mouse-related attributes in an event, which makes my head bigger! As follows:
| event.layerX | event.layerY |
| event.clientX | event.clientY |
| event.pageX | event.pageY |
| event.offsetX | event.offsetY |
| event.screenX | event.screenY |
| event.x | event.y |
Total 6 groups!
And they are not obvious differences, browsers are not compatible with each other!
The purpose of this article is to find out the differences between them and to pick out the ones that are not recommended.
The test code
Directly run the following code:
<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta charset="utf-8" /></p>
<style>
body {position:relative;}
div {min-height: 300px; background-color: #eee;}
#jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id="jg"> According to the results </span><br />
<input type="button" value=" A button " /></p>
<div> In the screen div</div>
<div style="height:1000px; width:2000px; background:#ddd;"> High and wide... </div>
<div> Outside the screen DIV</div>
<p></body><br />
<script>
var jg = document.getElementById('jg');
document.onmousemove = function (e) {
e = e || window.event;
jg.innerHTML = 'layerX:'+e.layerX+
',layerY:'+e.layerY+
', <br/>clientX:'+e.clientX+
',clientY:'+e.clientY+
', <br/>pageX:'+e.pageX+
',pageY :'+e.pageY+
',<br/>offsetX:'+e.offsetX+
',offsetY:'+e.offsetY+
',<br/>screenX:'+e.screenX+
',screenY:'+e.screenY+
',<br/>x:'+e.x+
',y:'+e.y;
}
</script><br />
</html>
In the process of testing found a artifact: chrome (Google browser) and IE9 fully compatible with all the above attributes! It's very convenient to compare them.
After comparison, the results are as follows:
Attribute definition
ScreenX and Y, the coordinates of the mouse relative to the left (top) of the entire screen, are basically out of sync with the document; Fully compatible.
X and y, the same layerX and y as the standard browser, are attributes in IE that can be used to replace layerX
Key points: layerX and layerY
If the currently pointing element is positioned, then layerX and Y return coordinates relative to that element. Otherwise, look at the parent tag of the element. Or no positioning, continue; All the way to the root element, the HTML node.
So, in firefox, to get an offsetX value, you have to add position information!
Compatibility summary:
Compatibility recovery
Position and event.layerx can be used to implement the event.offsetx attribute in a standard browser.
Ie 7, 8 no pageX, pageY, only in the document. The documentElement. ScrollLeft + event. ClientX to calculate.