JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标
分析：
外层边框是浏览器边框，内部盒子是页面的一个盒子，绿点是盒子中鼠标的位置。鼠标相对盒子边框的坐标=页面中（注意不是浏览器）鼠标坐标-盒子相对于浏览器边框的偏移量
第一步：求浏览器边框位置
x=element.offsetLeft;
y=element.offsetTop;
代码如下：
/*************样式表********************/
<style>
*{
padding: 0px;
margin: 0px;
}
body {
height: 2000px;
}
#box{
border: 1px solid black;
margin: 100px;
width: 400px;
height: 400px;
}
</style> /*************网页主体********************/
<body>
<div id="box"></div>
/*************JS代码********************/
<script>
//获取盒子边框相当于浏览器边框的距离
var box=document.getElementById('box');
26 var x=box.offsetLeft;
27 var y=box.offsetTop;
console.log(x);
console.log(y);
</script>
</body>
第二步：求鼠标在页面中的位置
鼠标在页面中的位置：
e.PageX e.PageY ---------->鼠标在整个文档中的位置
e.ClientX e.ClientY --------->鼠标在整个浏览器中的位置
上面二者的区别在于文档中有没有滚动条，如果有滚动条，则两个不一样，没有滚动条的情况下，二者没有区别。在本文要求中，需要使用e.PageX e.PageY
不过，e.PageX e.PageY有浏览器兼容性问题，从IE9以后才支持。
e.PageX=e.ClientX+滚动条滚动距离
e.PageY=e.ClientY+滚动条滚动距离
滚动条滚动距离也具有浏览器兼容问题，浏览器兼容问题解决如下：
2.1 滚动条的滚动距离的兼容问题
一般求滚动条滚动距离有两种方式，如下：
第一种：
scroll_x=document.body.scrollLeft
scroll_y=document.body.scrollTop
第二种：
scroll_x=document.documentElement.scrollLeft;
scroll_y=document.documentElement.scrollTop;
但是发现使用第一种方式，获得的滚动条滚动距离一直是0。
查资料发现是DTD的问题。
页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement.scrollTop。
页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop。
当然，针对上述问题，本文做了如下调整：
//滚动条滚动距离
var scroll_x=document.body.scrollLeft || document.documentElement.scrollLeft;
var scroll_y=document.body.scrollTop || document.documentElement.scrollTop;
2.2e.PageX e.PageY有浏览器兼容性问题
var page_x=e.pageX || e.clientX + scroll_x;
var page_y=e.pageY || e.clientY + scroll_y;
第二步和第一步做差，即能得到获取页面盒子中鼠标相对于盒子上、左边框的坐标
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
body {
height: 2000px;
}
#box{
border: 1px solid black;
margin: 100px;
width: 400px;
height: 400px;
}
</style>
</head> <body>
<div id="box"></div>
<script>
//获取盒子边框相当于浏览器边框的距离
var box=document.getElementById('box');
var box_x=box.offsetLeft;
var box_y=box.offsetTop; //滚动条滚动距离
var scroll_x=document.body.scrollLeft || document.documentElement.scrollLeft;
var scroll_y=document.body.scrollTop || document.documentElement.scrollTop; //鼠标点击事件
document.onclick=function(e){
//e.pageX e.pageY坐标
var page_x=e.pageX || e.clientX + scroll_x;
var page_y=e.pageY || e.clientY + scroll_y;
//相对坐标
var x=page_x - box_x;
var y=page_y - box_y;
console.log(x);
console.log(y);
}
</script>
</body>
</html>
JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标的更多相关文章
- Javascript获取页面表格中的数据
var main=mygrid.gettable("11"); //表示获取非固定列的表格 var main1=mygrid.gettable("01");// ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- javascript 获取页面的高度及滚动条的位置的代码
http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript ...
- js获取页面url中的各项值
一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...
- 用 Javascript 获取页面大小、窗口大小和滚动条位置
页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...
随机推荐
- 如何angular过滤器进行排序？？？
首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...
- Js浮动广告效果实现
第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...
- SharePoint Designer - Workflow
另一篇文章 SharePoint 2013 - Designer Workflow 1. Set field in current item : 不要连续多次使用,否则在发布时会出现unexpecte ...
- sql注入一点小心得
好久没写技术博客,最近研究产品关于用户体验方面较多,加上项目突然比较多,设计原型.跟进开发.设计师等工作着实没时间写博客. 接下来技术上主要php深入学习和mysql优化.这两天看了关于sql注入方面 ...
- 我是一只IT小小鸟读书笔记3
Part6: 一. 无论在什么时候,师兄师姐都是我们最好的资源,遇到不会的问题一定要及时向他们请教,善于利用身边的人脉关系也是一个基本的技能. 二. 爱好很多,但特长一定要有.仔细思考一下 ...
- spring与mybatis的整合
整合的思路 SqlSessionFactory对象放到spring容器中作为单例存在. 传统dao的开发方式中,从spring容器中获得sqlsession对象. Mapper代理形式中,从sprin ...
- python常用模块（二）
1.ConfigParser模块 用于生成和修改配置文档,在python3.x中变更为configparser 1 [DEFAULT] 2 ServerAliveInterval = 45 3 Com ...
- mysql使用mysqld_multi工具启动多实例
先给出实验环境/etc/my.cnf文件内容修改内容为:添加了[mysqld_multi]标签和多出来两个数据库的标签[mysqld3307]和[mysqld3308]配置完成后启动方法,举一例:my ...
- Echarts横坐标倾斜,顶部显示数字
最近项目使用到Echarts,所以学习了下 根据API,实现Echarts很简单,在这就不多说了,下面就说说项目中碰到的一些需求 1.由于横坐标很多,导致数据不能展示完整,所以需要设置横坐标样式倾斜展 ...
- Lucas 大组合数
题目:HDU 3037 题意:有n个树,m个坚果,放到n个树里,可以不放完,有多少种方法. 分析: 得到组合数了. 大组合数什么费马小定理,Lucas定理都来了: 总的说,不能用二维地推了,用的却是组 ...