page,client,offset区别
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区别的更多相关文章
- 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 ...
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- client offset scroll 之间的区别
一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...
- client offset screen 的区别
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- scroll、offset和client的区别
整体布局: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/ ...
- JS中常用坐标offset、scroll、client的区别
在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop ...
- 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.名词 ...
- jQuery方法position()与offset()区别
参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...
随机推荐
- Android-Activity使用（1）
一.添加 activity类 Aty1 继承Activity package activitylc.eoe.cn.l002activieylc; import android.app.Activit ...
- join用法
join命令可以将多个文件结合在一起,每个文件里的每条记录,都共享一个键值(key),键值指的是记录中的主字段,通常会是用户名称.个人姓氏.员工编号之类的数据. join - join lines o ...
- Eclipse设置自动换行
Eclipse 使用系统内置的“ Text Editor ”做为文本编辑器,这个文本编辑器有一个问题,就是文本无法换行.这个问题在显示上给人们带来不少麻烦. 终于有人忍不住开发了一个扩展插件 Word ...
- Ubuntu（14.04）远程连接windwos（server2008 r2）
只需安装rdeasktop即可, sudo apt-get install rdesktop rdesktop 192.168.1.100 -g 800x600 其他参数 -f 其实用Ubuntu自带 ...
- MVC HtmlHelper用法(一)@Html.BeginForm的使用总结
1.@using(Html.BeginForm()){} //提交到当前页面 2.@using ...
- 在CentOS 7上安装Node.js的4种方法
一.源码安装 1.下载源码(官网查看最新版本链接) wget http://nodejs.org/dist/v0.10.30/node-v0.10.30.tar.gz 2.解压源码 tar xzvf ...
- 获取设置唯一的UDID的值
http://blog.sina.com.cn/s/blog_5971cdd00102vqgy.html ---方法 http://www.jianshu.com/p/a7a4a14c8030 -- ...
- 如何关闭windows电脑的开机自启程序
很多时候我们打开电脑会发现,莫名其妙的出现一些已经在运行的程序了,这都是一些开机自启的软件之类的.可能你的电脑配置本来就不怎么高,开机还这样,那估计会很卡顿,那有什么方法可以关闭这些开机自动启动的程序 ...
- VS2013 密钥
MXS&Vincene ─╄OvЁ &0000017─╄OvЁ MXS&Vincene MXS&Vincene ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...
- 161216、使用spring的DefaultResourceLoader自定义properties文件加载工具类
import java.io.IOException; import java.io.InputStream; import java.util.NoSuchElementException; imp ...