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()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...
随机推荐
- Inside Flask - 配置的实现
Inside Flask - 配置的实现 flask 的配置对象 app.config 本身使用很简单,无非就是以字典的形式使用,而它的实现,本身就是以字典的形式的. 在 flask/config.p ...
- TCP_NODELAY
启用TCP_NODELAY的情况下: 客户端程序C连接到服务器程序S: C仅接受数据,S仅发送数据 S循环调用send发送长度很小的数据包比如:10字节; 在C上用任务管理器查看到C的上行流量大约是下 ...
- Java反射与动态代理
Java反射机制可以动态地获取类的结构,动态地调用对象的方法,是java语言一个动态化的机制.java动态代理可以在不改变被调用对象源码的前提下,在被调用方法前后增加自己的操作,极大地降低了模块之间的 ...
- Java Servlet(五)：GenericServlet与Servlet、HttpServlet之间的关系(jdk7+tomcat7+eclipse)
本篇主要记录下,对GenericServlet的作用理解,及其与Servlet/HttpServlet之间的关系. 示例完成业务: 1.新建一个login.jsp页面,要求改页面能输入username ...
- http.Handler 与Go的错误处理
原文地址 在之前我写过一篇关于通过使用http.HandlerFunc来实现一个定制handler类型用来避免一些平常的错误的文章.func MyHandler(w http.ResponseW ...
- 获取乌云补天指定关键字的漏洞并输出URL和标题
#coding=utf-8 import urllib2 import re import time def timestamp(): return str(time.strftime ...
- bzoj1741 [Usaco2005 nov]Asteroids 穿越小行星群
网络流,对于每一个行星,将行星所在行到行星连一条流量为1的边,将行星到其所在列连一条流量为1的边,从源点到所有行连一条流量为1的边,将所有列到汇点都连一条流量为1的边,最大流即为答案. 代码 #inc ...
- jQuery : eq() vs get()
.get(index) and .eq(index) both return a single "element" from a jQuery object array, but ...
- 【java报错】Could not instantiate listener
这个错误以前出现过好几次,莫名其妙的出现,莫名其妙的解决掉...昨天好好的,今天又出现了,记下来 2015-03-03 09:38:45.105:INFO:oejs.Server:jetty-8.1. ...
- Linux系统软件
ubuntu系统镜像文件: http://pan.baidu.com/s/1jGGgszO 虚拟机: http://pan.baidu.com/s/1hqrhQQg