offset:相对于当前“盒子”的距离 ，与滚动条无关

client:相对于可视区域的距离，与滚动条无关

page:相对于整个页面的距离，与滚动条有关

示例代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         #div1 {

             width: 400px;

             height: 1400px;

             background-color: red;

         }

         #div2 {

             width: 400px;

             height: 1400px;

             background-color: green;

         }

     </style>

 </head>

 <body>

 <div id="div1"></div>

 <div id="div2"></div>

 <script src="main.js"></script>

 </body>

 </html>
 (function () {

     function objClick(targetId) {

         document.getElementById(targetId).onclick = function (e) {

             console.log("offsetX " + e.offsetX + " offsetY " + e.offsetY);

             console.log("clientX " + e.clientX + " clientY " + e.clientY);

             console.log("pageX " + e.pageX + " pageY " + e.pageY);

             console.log("");

         }

     }

     objClick("div1");

     objClick("div2");

 })();

page,client,offset区别的更多相关文章

  1. failed (1113: No mapping for the Unicode character exists in the target multi-byte code page), client: 127.0.0.1...

    nginx部署网站后,访问域名,网页显示  500 Internal Server Error ,经查看发现nginx的error.log中有报错: failed (1113: No mapping ...

  2. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  3. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  4. client offset scroll 之间的区别

    一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...

  5. client offset screen 的区别

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...

  6. scroll、offset和client的区别

    整体布局: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/ ...

  7. JS中常用坐标offset、scroll、client的区别

    在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop ...

  8. JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

    原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...

  9. jQuery方法position()与offset()区别

    参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...

随机推荐

  1. spring_01

    1.框架 1.框架是解决什么问题的? 1.框架是用来解决代码冗余的问题 2.有利于团队的协作开发 3.框架是用来解决低耦合和高内聚的问题 4.解决健壮性和安全性 2.STRUTS2和hibernate ...

  2. Android-Activity使用（2）

    接着Android-Activity使用(1)实现页面跳转 一.在main_activity中添加按钮,注意 id的写法为"@+id/"+"id真正的名字" & ...

  3. C#中Brush、Color、String相互转换WPF/Silverlight

    //部分方法只适用于WPF,在SL中不能用 using System.Windows.Media; 1.String转换成Color Color color = (Color)ColorConvert ...

  4. javascript实现有向无环图中任意两点最短路径的dijistra算法

    有向无环图 一个无环的有向图称做有向无环图(directed acycline praph).简称DAG 图.DAG 图是一类较有向树更一般的特殊有向图, dijistra算法 摘自 http://w ...

  5. RDIFramework.NET ━ .NET快速信息化系统开发框架钜献 V2.9 版本震撼发布

    RDIFramework.NET ━ .NET快速信息化系统开发框架钜献 V2.9 版本震撼发布 全新体验.全新感觉.2015钜献! 继上个版本“RDIFramework.NET V2.8版本发布”5 ...

  6. 使用Go开发web服务器

    原文链接 Go(Golang.org)是在标准库中提供HTTP协议支持的系统语言,通过他可以快速简单的开发一个web服务器.同时,Go语言为开发者提供了很多便利.这本篇博客中我们将列出使用Go开发HT ...

  7. 湖大OJ-实验C----NFA转换为DFA

    实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...

  8. svg学习（七）polygon

    <polygon> 标签用来创建含有不少于三个边的图形. <?xml version="1.0" standalone="no"?> & ...

  9. VBA好的插件

    VBE 小插件--- Office 编程助手 :http://club.excelhome.net/thread-1055425-1-1.html VB以及VBA的编程助手MZ-tools7.0破解版 ...

  10. java实现求数组中元素第二大的元素

    /** * 找出数组中数第二大的值 * @param array * @date 2016-9-25 * @author shaobn */ public static void getMethod_ ...