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()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...
随机推荐
- WINDOWS命令和批处理
转:http://www.cnblogs.com/itech/archive/2009/04/15/1436409.html 另外查看WIndows和Linux的所有命令:http://www.ss6 ...
- 用soapUI生成客户端代码
一.用soapUI生成客户端代码 方法一: 1.第一步,打开soapUI,菜单栏里的tools,选择apache CXF,如图, 2.第二步,WSDL:写上你连接服务端的地址,OutputDirect ...
- 记一次奇怪IE动态加载js的乱码
1. 问题背景 某个老产品需要支持IE8,前端部分组件采用scrat开发体系进行开发的,当页面中内嵌的iframe的页面再加载组件js的时候,某些情况下会出现组件的js乱码,导致组件的js不能运行.而 ...
- Bootstrap modal被sliverlight掩盖。
Bootstrap中的modal被silverlight遮挡了,解决方案: <object id='xx'....> ... <param name="windowless ...
- textarea 换行操作
在 textarea 中输入回车符,提交表单时,传给后台的是 '\n' 或者 '\r\n'(在IE下,换行符传入\r\n:在Firefox和谷歌浏览器下,换行符只传入了\n). 楼主也做了一个案例,让 ...
- 隐藏，显示任务栏，桌面 C++代码
HWND desktop,task; desktop=FindWindow(L"ProgMan",NULL); task=FindWindow(L"Shell_TrayW ...
- Mac电脑AndroidStudio使用SVN进行版本控制
http://blog.csdn.net/xiaoshi720/article/details/49467523
- 使用jquery的imagecropper插件做用户头像上传 兼容移动端
在移动端开发的过程中,或许会遇到对图片裁剪的问题.当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉. 图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都 ...
- 夺命雷公狗-----React---1--页面的渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AJAX-----05XMLHttpRequest对象的用post方式进行ajax请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...