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

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

分类:Web 时间:2010-09-29 人气:244
分享到:
blog comments powered by Disqus

相关文章

  • Dynamically change the input type tag attributes (such as the password to text) 2010-12-25

    <HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script> function removeSubmitFocus () { document.all ('pass'). outerHTML = "<input type = text name ='" + document

  • input type description 2010-11-19

    Form Input in the form that an input object, its type and with different sub-Type text input box, the password input box, radio / check box, and submit / reset buttons, the following introduced one by one. 1, type = text Input type is text, this is t

  • jQuery动态添加 input type=file的实现代码 2014-04-21

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能 <form id="fileForm" action="" method="post" enctype="multipart/form-data"> <tr> <td> <input type="file" name="file&quo

  • jQuery操作input type=radio的实现代码 2014-08-09

    jQuery操作input type=radio的实现代码,需要的朋友可以参考下 <input type="radio">如下: <input type="radio" name="city" value="BeiJing">北京 <input type="radio" name="city" value="TianJin">天津

  • 如何用正则取input type="text"中的value 2014-02-04

    1.如何通过正则取input type="text"中的value呢? 2.如何过滤掉input type="checkbox"的标签? 这样只能达到正则取input type="text"中的value可是不能过滤掉input type="checkbox"的标签! alert [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] alert [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 解决: aler

  • JavaScript determine browser type and version 2010-04-13

    Stated, the original post URL: http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html I have reproduced here, but their record in order to prevent such situation can not access the site, the original author if you do not agree, you can messag

  • JavaScript determine browser type and version (new Google's Chrome) 2010-04-21

    Do you know how many species of the world's browser? In addition to our well-known IE, Firefox, Opera, Safari browser, other than four, there are hundreds of species of the world's browser. A few days ago, the browser has just been born a family of t

  • MVP For GWT series of data reproduced 12: a thorough understanding of GWT Part 2: JavaScript's overlay type 2009-03-10

    The source text from: https: / / txt.appspot.com/pt2club.blogspot.com/2010/02/gwt-part-2javascript-overlay-type.html A thorough understanding of GWT Part 2: JavaScript's overlay type Original: http://googlewebtoolkit.blogspot.com/2008/08/getting-to-r

  • javascript中input中readonly和disabled区别介绍 2013-12-17

    javascript中input中readonly和disabled区别,在开发中可能会常有用到,利用js动态改变input的属性 Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等.但是表单元素在使用了

  • firefox下input type="file"的size是多大 2014-12-20

    firefox对type="file" 的input的width定义目前是不支持的,但是FF支持size属性,可以给size设置一个值,来控制上传框的大小 但是这个size值怎么设置,size="10"是多宽,默认值又是多少,不能光凭感觉去设置. 用脚本来查看下: <script type="text/javascript"> $(function() { var fileArray = []; var i = 0; while (i

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.460 (s). 12 q(s)