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()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...
随机推荐
- LeetCode Strobogrammatic Number II
原题链接在这里:https://leetcode.com/problems/strobogrammatic-number-ii/ 题目: A strobogrammatic number is a n ...
- [SLAM]2D激光线特征提取
Nguyen, V., et al. (2007)."A comparison of line extraction algorithms using 2D range data for i ...
- 如何安装mysql服务
我刚开始安装mysql的时候,在windows的服务里面可以看到,但是装了以后有一段时间没有用它了,我在准备从windows的服务里面启动mysql服务的时候,发现没有mysql的服务了,那我的解决办 ...
- ios每日一发--Leanclude数据云存储以及登录 注册账户
利用LeanCloud来实现注册账号,存储账号以及,登录时查询账号是否正确.集成方式很简单可以看这里的官方文档.地址是这里: https://leancloud.cn/docs/ 在这里创建应用,以及 ...
- Ubuntu 安装BCM 43142无线网卡驱动
ubuntu14.04 安装 bcm43142无线网卡 用命令lspci 查看无线网卡类型 然后下载对应的无线网卡驱动. 之后,使用下列命令安装,即可搜索无线热点了: sudo apt-get ins ...
- jQuery选择器和事件
选择器 常用事件 绑定与解除绑定 事件目标与冒泡 自定义事件
- GIt的命令
Git 命令 1,git init初始化当前文件夹为git仓库的根目录 2.git commit提交到本地仓库 3.git push origin master 提交到服务器 4.git log 查看 ...
- Python数据
读取文件中数据的最高分数 highest_score=0 result_f=open("results.txt") for line in result_f: (name,scor ...
- SQL Server数据库性能优化（二）之 索引优化
参考文献 http://isky000.com/database/mysql-performance-tuning-index 原文作者是做mysql 优化的 但是我觉得 在索引方面 ...
- mui记录
事件addEventListener()绑定事件的对象方法.addEventListener()含有三个参数,一个是事件名称,另一个是事件执行的函数,最后一个是事件捕获.obj.addEventLis ...