`
hduyou
  • 浏览: 23359 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

js 关于鼠标在页面中坐标显示的种种

阅读更多
首先先看一段代码
<html>
<head>
</head> 
<body> 
<script type="text/javascript"> 
function mouseCoordination(michael){ 
    //以下主要是对不同浏览器进行兼容操作
     if(michael.pageX || michael.pageY){ 
//IE不支持pageX之类的 这里主要是对于chrome 和firefox之类的浏览器
      return {x:michael.pageX, y:michael.pageY}; 
      } 
      else return { 
//以下是IE浏览器的操作动作 至于为什么这么写 待会看图就会明白
       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; //不知为什么 显示出来 就是多了个michael 应该前面变量只有一个michael的
    var mouseCoo = mouseCoordination(michael); 
    document.getElementById('xCoordination').value = mouseCoo.x; 
    document.getElementById('yCoordination').value = mouseCoo.y; 
} 
document.onmousemove = mouseMove; 
</script> 
X坐标:<input id="xCoordination" type="text" />  Y坐标:<input id="yCoordination" type="text" /> 
</body> 
</html>

关于javascript中clientX,pageX,offsetX,x,layerX,screenX,offsetLeft之类的图解说明


对clientX等的文字说明
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。
offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
clientHeight
获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
SCROLL属性
scroll
设置或获取滚动是否关闭。
scrollHeight
获取对象的滚动高度。
scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth
获取对象的滚动宽度。event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标

W3C关于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
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条

W3C对于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>



我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里查看。
这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。 NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。 简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。


NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。

 
pageX/pageY:

鼠标相对于整个页面的X/Y坐标。

IE不支持!

offsetX/offsetY:

得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:

只有IE支持!相当于IE下的pageX,pageY.

screenX/screenY:

就是鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过你的屏幕分辨率。
clientX/clientY:

事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。

特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY与火狐下的始终大2px


分享到:
评论
4 楼 suiye007 2010-10-08  
其实重点就是那张图啊!
3 楼 webee 2010-10-08  
看的眼花啊!实际只要知道这些属性就可以了,用的时候测试一两次就明白了!
2 楼 hduyou 2010-09-30  
libmw 写道
很好,搜藏了

恩 欢迎共享
1 楼 libmw 2010-09-30  
很好,搜藏了

相关推荐

    java-ssm+vue电影推荐系统实现源码(项目源码-说明文档)

    基于协同过滤算法的电影推荐系统的部署与应用,将对首页,个人中心,用户管理,电影分类管理,免费电影管理,付费电影管理,电影订单管理,我的电影管理,电影论坛,系统管理等功能进行管理 项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术:ssm 前端技术:Vue 关键技术:springboot、SSM、vue、MYSQL、MAVEN 数据库工具:Navicat、SQLyog

    12345688882222

    12345688882222

    4-3_Business_DK_BLUE_2017_09-CL-20180524MTAX.potx

    微软演示材料

    java基于ssm+jsp北关村基本办公管理系统源码 带毕业论文+PPT

    1、开发环境:ssm框架;内含Mysql数据库;JSP技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试,代码没有任何bug! 4、该资源包括项目的全部源码,下载可以直接使用! 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。

    最新潮乎盲盒源码及搭建教程 后端采用Laravel框架开发

    采用后端Laravel框架进行开发,前端开发框架则使用了uniapp+vue。在环境配置方面,我们建议使用php7.4 + mysql5.6 + nginx1.22 + redis,并且推荐使用宝塔面板或lnmp等工具进行配置。

    java基于ssm+jsp大学生成果登记系统源码

    1、开发环境:ssm框架;内含Mysql数据库;JSP技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试,代码没有任何bug! 4、该资源包括项目的全部源码,下载可以直接使用! 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。

    基于Matlab界面GUI设计的图像平滑处理[Matlab界面GUI设计].zip

    matlab

    vb+SQL车辆管理系统设计(论文+源代码).zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

    Flutter 应用的 Firebase 插件集合

    FlutterFire 是一组Flutter 插件 ,可让 Flutter 应用使用Firebase服务。您可以按照Firebase for Flutter代码实验室中的示例了解如何使用这些插件。 Flutter是 Google 的 UI 工具包,可用于通过单一代码库为移动设备、网页和桌面构建精美的原生编译应用。Flutter 被世界各地的开发者和组织使用,并且是免费且开源的。

    小程序-祝福话(源码).zip

    小程序-祝福话(源码).zip 小程序-祝福话(源码).zip 小程序-祝福话(源码).zip

    vb+access酒店管理信息系统(论文+系统).zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

    58-AspNet8-jQery-Datatables-3-Code.zip

    构建使用jQuery组件DataTables.net的Asp.Net 8 MVC应用程序的实用指南。

    【高创新】基于斑马优化算法ZOA-Transformer-BiLSTM实现故障识别Matlab实现.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    【高创新】基于灰狼优化算法GWO-Transformer-LSTM实现故障识别Matlab实现.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    【高创新】基于淘金优化算法GRO-Transformer-BiLSTM实现故障识别Matlab实现.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    VB人事管理系统(源代码+论文).zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

    【高创新】基于白鲸优化算法BWO-Transformer-BiLSTM实现故障识别Matlab实现.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    c++课程设计-个人收支管理系统.7z

    c++课程设计-个人收支管理系统.7z

    Centos7_shell脚本一键安装httpd_nginx_php_jdk_kafka_psql__bash

    Centos7_shell脚本一键安装httpd_nginx_php_jdk_kafka_psql__bash-shell

    VB中大迅通合同统计系统(论文+源代码).zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

Global site tag (gtag.js) - Google Analytics