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 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...
随机推荐
- cf547D. Mike and Fish(欧拉回路)
题意 题目链接 Sol 说实话这题我到现在都不知道咋A的. 考试的时候是对任意相邻点之间连边,然后一分没有 然后改成每两个之间连一条边就A了.. 按说是可以过掉任意坐标上的点都是偶数的数据啊.. #i ...
- 【数据库】2.0 MySQL入门学习(二)——如何获得MySQL以及MySQL安装
1.0 如何获得MySQL: www.oracle.com https://dev.mysql.com/downloads/ 2.0 例如进入Oracle官网,找到MySQL: 进入页面后,切换到“资 ...
- http状态码汇总及代表意思
成功2×× 成功处理了请求的状态码.200 服务器已成功处理了请求并提供了请求的网页.204 服务器成功处理了请求,但没有返回任何内容. 重定向3×× 每次请求中使用重定向不要超过 5 次.301 请 ...
- mui 窗体切换
手机实现窗体切换 1.在5+环境下(即H5app) 先初始化: mui.init({ subpages:[{ url:"page1.html",//子页面HTML地址,支持本地地址 ...
- Jmeter(一)http接口添加header和cookie --转载
Jmeter(一)http接口添加header和cookie HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post ...
- Anaconda教程
python虚拟环境 当安装新的外部python包时,为了保证原版python的纯净,避免其他项目调试时出现错误,可使用Anaconda创建虚拟python进行调试和操作 创建新的虚拟环境(Win ...
- Java—IO流 File类的常用API
File类 1.只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问. package cn.test; import java.io.File; import java.io.IOE ...
- Android学习——ViewPager的使用(三)
这一节来介绍一下在ViewPager中常用到的一个控件,标题栏. 标题栏分为PagerTabStrip和PagerTitleStrip两种,用法类似,这里介绍第一种. 具体做法 在layout文件中的 ...
- sqlserver 带输出参数的存储过程
--创建存储过程create procedure proc_stu@sname varchar(20),@pwd varchar(50),@flag bit outputasif exists(sel ...
- spring-4.3.16+xfire-spring-1.2.6版本升级
最近爆了个spring的漏洞,然后公司整体要求升级spring到最新版本,然后搞四了一大批猿人. spring-4.*的最新版本是4.3.16(稳定版) xfire-spring-1.2.6(最新版- ...