js on the mouse coordinates in the page displayed in the various

sponsored links
First look at a piece of code
<html>
<head>
</head> 
<body> 
<script type="text/javascript"> 
function mouseCoordination(michael){ 
    // The following is on a different browser compatible operation  
     if(michael.pageX || michael.pageY){ 
//IE Does not support such pageX    Here mainly for chrome and  firefox Like the browser  
      return {x:michael.pageX, y:michael.pageY}; 
      } 
      else return { 
// The following is the IE browser operation    As for why this question will look at the pictures and you'll understand  
       x:michael.clientX + document.body.scrollLeft - document.body.clientLeft, 
       y:michael.clientY + document.body.scrollTop  - document.body.clientTop 
       }; 
           
} 

function mouseMove(michael){ 
   michael = michael || window.event; // I do not know why is displayed    Just one more michael should have only one previous variables  michael By  
    var mouseCoo = mouseCoordination(michael); 
    document.getElementById('xCoordination').value = mouseCoo.x; 
    document.getElementById('yCoordination').value = mouseCoo.y; 
} 
document.onmousemove = mouseMove; 
</script> 
X Coordinates  :<input type="text" />  Y Coordinates  :<input type="text" /> 
</body> 
</html>

On the javascript in the clientX, pageX, offsetX, x, layerX, screenX, offsetLeft illustrates like
js on the mouse coordinates in the page displayed in the various


Such as the text of clientX
offsetTop
Get the object relative to the layout or coordinate parent offsetParent attribute specifies the calculation of the top position.
offsetLeft
Get the object relative to the layout or coordinate parent offsetParent property specifies the left position calculation.
offsetHeight
Get the object relative to the layout or coordinate parent offsetParent attribute specifies the height of the parent coordinates.
IE, Opera that offsetHeight = clientHeight + scroll + border.
NS, FF offsetHeight is content that the actual height, can be less than clientHeight.
offsetWidth
Get the object relative to the layout or coordinate parent offsetParent attribute specifies the width of the parent coordinates.
offsetParent
Returns a description of the container offsetTop and offsetLeft properties object.
clientHeight
Returns the height, not counting any margin, border, scroll bar or may be applied to the padding of the object.
We have no objection to the clientHeight, are considered the height of the content viewing area, meaning that the browser page content can be seen in the height of the region, typically the last tool bar above the status bar the following to the region, nothing to do with the page content.
clientLeft
Get offsetLeft property and customer of the actual distance between the left side.
clientTop
Get offsetTop property and customer of the actual distance between the top.
clientWidth
Get the width of the object does not calculate any margin, border, scroll bar or may be applied to the padding of the object.
SCROLL attribute
scroll
Sets or returns the scroll is closed.
scrollHeight
Scroll to get the object height.
scrollLeft
Sets or returns the object in the left margin and the contents of the window shows the current distance between the extreme left.
scrollTop
Sets or returns the object at the top and the contents of the window is visible distance between the top.
scrollWidth
Get the width of the scroll object. event properties
x
Sets or returns the mouse pointer relative to the parent document of the x pixel coordinates.
screenX
Sets or returns the mouse pointer relative to the screen x-coordinate

W3C example is given on the screen
<html>
<head>
<script type="text/javascript">
function show_coords(event)
  {
  x=event.screenX
  y=event.screenY
  alert("X coords: " + x + ", Y coords: " + y)
  }
</script>
</head>
<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert 
the x and y coordinates of the cursor.</p>

</body>
</html>


offsetX
Sets or returns the mouse pointer relative to the trigger event object x coordinates.
clientX
Sets or returns the mouse pointer relative to the window client area of the x coordinate of the client area does not include the window itself and scroll bars

W3C example is given for the client
<html>
<head>
<script type="text/javascript">
function show_coords(event)
  {
  x=event.clientX
  y=event.clientY
  alert("X coords: " + x + ", Y coords: " + y)
  }
</script>
</head>

<body onmousedown="show_coords(event)">
        
        <p>Click in the document. An alert box will alert 
the x and y coordinates of the mouse pointer.</p>

</body>
</html>


We are here to talk about the four types of browser document.body the clientHeight, offsetHeight and scrollHeight explanation here that is document.body, if it is HTML control, then there are different, click here.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).
clientHeight
We have no objection to the clientHeight, are considered the height of the content viewing area, meaning that the browser page content can be seen in the height of the region, typically the last tool bar above the status bar the following to the region, nothing to do with the page content.
offsetHeight
IE, Opera that offsetHeight = clientHeight + scroll + border. NS, FF offsetHeight is content that the actual height, can be less than clientHeight.
scrollHeight
IE, Opera is a web content that scrollHeight actual height, can be less than clientHeight. NS, FF scrollHeight is the web content that height, but the minimum is clientHeight. Simply
clientHeight is through the browser to see the content of this region height.

NS, FF scrollHeight that all web content offsetHeight and height, but when the page content when the height is less than equal to the clientHeight, scrollHeight value is clientHeight, and offsetHeight can be less than clientHeight.
IE, Opera is a visual area that offsetHeight clientHeight scroll bar plus border. scrollHeight web content is the actual height.
Similarly
clientWidth, offsetWidth and scrollWidth above interpretation of the same width but the height can be replaced.
But
DOCTYPE in the FF in a different interpretation of the clientHeight different, xhtml 1 trasitional the above is not explained. Other browsers the problem does not exist.


pageX / pageY:

Mouse relative to the entire page X / Y coordinates.

IE does not support!

offsetX / offsetY:

The results obtained with the pageX / pageY as being the case, what is the value it? Because:

Only IE support! Under the equivalent of IE pageX, pageY.

screenX / screenY:

Is the coordinates of the mouse on the screen. screenX, screenY maximum of no more than your screen resolution.
clientX / clientY:

Mouse event in the browser content area of the X / Y coordinates (does not contain a scroll bar). The browser content area that is in the browser window to display the web page viewing area, pay attention to the visual, that need to drag the scroll bar to see the area is not. When you shrink the browser window when, clientX / clientY the maximum will be reduced, but still, they will not exceed the maximum viewable area in your browser.

Special Note: IE does not standardize this property under their minimum value is not 0, but 2, that under IE clientX / clientY with Firefox has always been under great 2px
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of js on the mouse coordinates in the page displayed in the various

  • JavaScript inheritance

    About JavaScript inherited a small example ... <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conte ...

  • js page Jump implementation of a number of ways

    The first is: <script language="javascript" type="text/javascript"> window.location.href = "login.jsp? backurl =" + window.location.href; </ script> The second: <script language="javascript"> alert

  • jboss ejb3 Message Driven Bean

    Super Medium ejb hate. . . . . . . . . . . . . . . . . . . ================================================ To configure a Message Driven Bean in a different application server parameters are not the same. Currently only passed the test jboss. Message Dri

  • Dynamic loading JS script four kinds of methods

    To achieve dynamic loading JS script has four kinds of methods: 1, direct document.write <script language="javascript"> document.write ( "<script src='test.js'> <\ / script>"); </ script> 2, dynamic scri

  • RoR explained

    ROR is Ruby on Rails. Ruby is a well-known has been very good dynamic language It's dynamic language. Simple and easy. Dynamic languages are interpreted, but the performance may make a discount, but not absolute, because the application is complex, th

  • spring + hibernate + oracle9i to read and write CLOB

    Database-driven update classes12-9i.jar Hibernate modify the configuration of the following code <bean/> <bean Lazy-init="true"> <property name="nativeJdbcExtractor"> <ref local="nativejdbcExtractor"/>

  • Process migration from tomcat to websphere changes

    Process migration from tomcat to websphere changes Because customers use the web application server software used by different what tomcat5, tomcat6, websphere5.1, websphere6.1, weblogic8, and so on, and the software used inconsistent standards, ibm's

  • The level Hibernate cache

    Hibernate cache level: (1) a cache is very short and the session life cycle consistent, also known as session-level cache-level cache or transaction-level cache (2) Ways of Supporting level cache: get (); load (); iterator (); only entity object cach ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries