Easily differentiate between offsetx, ClientX, PageX, ScreenX, Layerx, X and other properties in JavaScript Event objects with 3 graphs and 1 tables.
first, the test code is as follows:
<! DOCTYPE html> Body{margin:0;padding:0;background: #ccc; font-Size:12px;overflow:auto}. main{width:500px;height:330px;position:relative;margin:250px Auto0;background-color: #eee;} . Box{position:absolute;width:220px;height:180px;background-color:orange;top:80px;left:80px;} </style> varOBox = document.getElementById (' box '); Window.onload=function() {Obox.onmousedown=function(EV) {EV= EV | |window.event; Console.log (Ev.offsetx, ev.offsety); Console.log (Ev.clientx, Ev.clienty); Console.log (Ev.pagex, Ev.pagey); Console.log (Ev.screenx, Ev.screeny); Console.log (Ev.layerx, ev.layery); Console.log (ev.x, EV.Y); } } </script> </body> second, the support of these properties by different browsers:Iii. graphical Event.offsetx,event.clientx,event.pagex,event.screenx propertiesClick here to view larger image
Iv. graphical Event.layerx,event.layery propertiesClick here to view larger image
V. Graphical EVENT.X,EVENT.Y PropertiesClick here to view larger image
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
vi. Jquery compatible notationJQuery event object, including Event.offsetx, Event.clientx,event.pagex,event.screenx and other properties (in Firefox browser, OffsetX is undefined). Firefox gets the value of offsetx/offsety, which needs to be originalevent through the event object's properties.
<script> $ (function() { $ ("#box"). MouseDown (function( Event) { Console.log (event.offsetx, event.offsety); Console.log (Event.clientx, event.clienty); Console.log (Event.pagex, event.pagey); Console.log (Event.screenx, Event.screeny); /* * /Console.log (Event.originalEvent.layerX, Event.originalEvent.layerY); }) ; </script>
Plot JS Event object offsetx, ClientX, PageX, ScreenX, Layerx, x difference