Home > Developer > Web Develop
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> <HTMLLang= "ZH-CN"> <Head> <MetaCharSet= "Utf-8" /> <title>Javascript</title> <style>Body{margin:0;padding:0;background:#ccc;font-size:12px;Overflow:Auto}. Main{width:500px;Height:330px;position:relative;margin:250px Auto 0;Background-color:#eee;}. Box{position:Absolute;width:220px;Height:180px;Background-color:Orange;Top:80px; Left:80px;} </style> </Head> <Bodystyle= "height:1600px;"> <Divclass= "Main"> <Divclass= "box"ID= "box"></Div> </Div> <Script> 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> </HTML>
second, the support of these properties by different browsers:
Iii. graphical Event.offsetx,event.clientx,event.pagex,event.screenx properties
Click 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.
$ (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); }) ; Plot JS Event object offsetx, ClientX, PageX, ScreenX, Layerx, x Difference
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
