分析：

外层边框是浏览器边框，内部盒子是页面的一个盒子，绿点是盒子中鼠标的位置。鼠标相对盒子边框的坐标=页面中（注意不是浏览器）鼠标坐标-盒子相对于浏览器边框的偏移量

第一步：求浏览器边框位置

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--获取页面盒子中鼠标相对于盒子上、左边框的坐标的更多相关文章

  1. Javascript获取页面表格中的数据

    var main=mygrid.gettable("11"); //表示获取非固定列的表格 var main1=mygrid.gettable("01");// ...

  2. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  3. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  4. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  5. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  6. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. javascript 获取页面的高度及滚动条的位置的代码

    http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载   javascript ...

  8. js获取页面url中的各项值

    一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...

  9. 用 Javascript 获取页面大小、窗口大小和滚动条位置

    页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...

随机推荐

  1. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  2. CSS3中的Flexbox弹性布局（二）

    flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...

  3. QTablewidget 简单例子

    [1]QTableWidget简介 QTableWidget是QT对话框设计中常用的显示数据表格的控件. 学习QTableWidget就要首先看看QTableView控件(控件也是有”家世“的!就像研 ...

  4. wxpython 界面布局

    1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...

  5. 搭建 Spring 2.5.6 开发环境

    1.jar 包准备: spring 2.5.6 的 jar 包(链接: http://pan.baidu.com/s/1skVFfcx 密码: mbiz),如图: commons-logging-1. ...

  6. Python 进程线程协程 GIL 闭包 与高阶函数（五）

    Python 进程线程协程 GIL 闭包 与高阶函数(五) 1 GIL线程全局锁 ​ 线程全局锁(Global Interpreter Lock),即Python为了保证线程安全而采取的独立线程运行的 ...

  7. May 13th 2017 Week 19th Saturday

    Mountains look beautiful from a distance. 远处看山山更美. This gnomic seems to circulate very long, its mor ...

  8. 传统数据仓库项目的优化手段 （针对 Oracle+DataStage ）

    普通手段 分区,HASH-JOIN,数据仓库函数,物化视图,位图索引等等为大伙在数据仓库常用的技术, 而下面列举的tips为项目中常用的优化手段/技巧,绿色背景highlight的部分属于非常规手段, ...

  9. BZOJ1033:[ZJOI2008]杀蚂蚁antbuster(模拟)

    Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右 下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的 ...

  10. 围绕react衍生出来的思考

    优势一.声明式开发 首先react是声明式的开发方式,这个与之对应的是命令式开发方式,之前在用jquery写代码的时候,都是直接来操作dom,直接操作dom的这种编程方式,我们把他叫做命令式的编程,也 ...