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. RabbitMQ学习总结 第三篇：工作队列Work Queue

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  2. [Android Tips] 10. Pull out /data/data/${package_name} files without root access

    #!/usr/bin/env bash PACKAGE_NAME=com.your.package DB_NAME=data.db rm -rf ${DB_NAME} adb shell " ...

  3. JAVA线程池原理详解二

    Executor框架的两级调度模型 在HotSpot VM的模型中,JAVA线程被一对一映射为本地操作系统线程.JAVA线程启动时会创建一个本地操作系统线程,当JAVA线程终止时,对应的操作系统线程也 ...

  4. 总结一下在ASP.NET中开发网站的一般步骤

    1.打开Miscosoft Visual Studio2010 2.新建网页添加新项 3.设计网页 4.添加窗体控件 5.优化页面 6.调试网页

  5. 从表中删除重复记录的sql

    --有一个表,假设是这样的 CREATE TABLE Test ( field1 ) primary key, field2 )); --假设field1上有索引. 要删除表中所有field1重复的记 ...

  6. Signalr简单例子

    一.需要引用的 Js: 二.编码 用的是signalr2,需要新建Startup.cs类,编码如下: using Microsoft.Owin; using Owin; using System; u ...

  7. MVC中return File(byte[],"image/jpeg")输入图片不清晰

    MVC中需要输入图片的时候有一个便捷的方法,return File(byte[],"image/jpeg"); 但是这样处理的图片很不清晰(特别是要进行缩放,DrawImage,D ...

  8. 引用参数，值参数，ref,out

    1,一个参数只有在引用的时候才能改变其值,这是一种情况 2,一个参数在引用后要永久的改变其值(可以用返回参数的形式) 3,多个参数在引用后要永久的改变其值或者多个参数中的部分(返回参数就适合了,因为只 ...

  9. 《C#编程》课件 - C#基础

    声明多维数组• 创建一个多维数组int[,] intMatrix;float[,] floatMatrix;string[,,] strCube;使用new关键字• 必须指定每个维度的大小int[,] ...

  10. Prince2和PMP的区别，大多数人都没有搞清楚！

    [涨姿势]Prince2和PMP的区别,大多数人都没搞清楚!   项目管理领域有2个流行的知识体系:☑ 一个是美国项目管理协会(PMI)开发的"项目管理知识体系(PMBOK,Project ...