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. Bugzilla说明

    简介 Bugzilla是Mozilla公司向我们提供的一个开源的免费缺陷跟踪工具.作为一个产品缺陷的记录及跟踪工具,它能够为你建立一个完善的Bug跟踪体系,包括报告Bug.查询Bug记录并产生报表.处 ...

  2. 将IIS 7，IIS 8运行在32位

    win2008及win2012的IIS运行在32状态下,原因是ASP程序必须在32位下才能使用ACCESS, 只有在32位下,myodbc才会正常,注意,MySQL必须用32位版本. 设置办法: 打开 ...

  3. Hausdorff distance

    微分动力系统原理 这本书里有介绍 Hausdorff距离是描述两组点集之间相似程度的一种量度,它是两个点集之间距离的一种定义形式:假设有两组集合A={a1,…,ap},B={b1,…,bq},则这两个 ...

  4. dubbo源码分析5-dubbo的扩展点机制

    dubbo源码分析1-reference bean创建 dubbo源码分析2-reference bean发起服务方法调用 dubbo源码分析3-service bean的创建与发布 dubbo源码分 ...

  5. hdu 1175冒牌连连看

    #include <bits/stdc++.h> using namespace std; const int N = 1005; int arr[N][N]; int vis[N][N] ...

  6. Python爬虫--简单爬取图片

    今天晚上弄了一个简单的爬虫,可以爬取网页的图片,现在现在做一下准备工作. 需要的库:urllib 和 re urllib库可以理解为是一个url下载器,其中有三个重要的方法 urllib.urlope ...

  7. 你值得拥有：25个Linux性能监控工具

    一.基于命令行的性能监控工具 1.dstat - 多类型资源统计工具 该命令整合了vmstat,iostat和ifstat三种命令.同时增加了新的特性和功能可以让你能及时看到各种的资源使用情况,从而能 ...

  8. kali安装nautilus-open-terminal不起作用

      apt-get install nautilus-open-terminal (鼠标右键在当前目录打开终端) 这个功能不起作用时,可以按如下操作,经试验有效! nautilus -q && ...

  9. php + Bootstrap-v3-Typeahead 自动完成组件的使用

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...

  10. 如何去掉list里重复的数据

    去掉list重复的数据,目前总结的以下三种方法,分别是采用set集合来做.两层循环不用任何方法来做,以及一层循环采用contains()方法来做,如下: 1.采用set结合来做: package te ...