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 人气:247
分享到:
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

  • INPUT[type=file] 的 'value' 属性值在各浏览器中存在差异 2012-06-28

    标准参考 当一个 INPUT 元素的 'type' 属性值设置为 'file' 时创建了一个文件选择控件(file select),其中 INPUT 元素的 'value' 属性值便是文件的初始名称. 另外,在 IE6 和 IE7 下通过此方法实现的文件选择控件的输入框是可以手动输入的,但若在此路径下不存在此文件则会显示错误信息,而在 IE8 和其他浏览器中是禁止手动输入的. 关于 INPUT[type=file] 的详细信息,请参考 HTML4.0 规范 17.4.1 Control type

  • input type=submit 的小问题 2013-07-16

    以前使用strtus2时,在jsp页面中有input时要去name才可以保证数据不会被提交到服务器,一直没有弄明白为什么会这样的,看到一段解释明白了. HTML元素 - input type=submit 定义 创建一个按钮,点击该按钮后,即提交表单. Creates a button that, when clicked, submits the form. 注释 使用 VALUE 标签属性将创建无法由用户编辑的显示标签.默认的文字是 Submit Query.如果用户单击提交按钮提交了表单,

  • 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

  • HTML教程:INPUT type=text元素 | input type=text对象 2014-09-30

    INPUT type=text元素 | input type=text 创建一个单行的文本输入控件. 成员表 下面的表格列出了 input type=text 对象引出的成员.请单击左侧的标签来选择你想要查看的成员类型. 标签属性/属性 标签属性 属性 描述 ACCESSKEY accessKey 设置或获取对象的快捷键. ATOMICSELECTION 指定 元素 及其内容是否可以一不可见单位统一选择. AUTOCOMPLETE autocomplete 设置或获取对象的自动完成状态. BEG

  • 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

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

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

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

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