JavaScript事件坐标区别（offset，client，page）
学习笔记。
1. offset：其定位原点是当前元素左上角
2. client：其定位原点是当前窗口左上角
3. page：其定位原点是当前页面左上角
下面来验证一下。
先上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
#div1 {
width: 200px;
height: 200px;
position: absolute;
top: 400px;
left: 100px;
background-color: rebeccapurple;
}
</style>
<script>
$(function(){
$("#div1").click(function(event){
console.log("offsetX值为："+event.offsetX," offsetY值为："+event.offsetY);
console.log("clientX值为："+event.clientX," clientY值为："+event.clientY);
console.log("pageX值为："+event.pageX," pageY值为："+event.pageY);
console.log("---------------------------------------")
})
})
</script>
</head> <body style="height: 2000px">
<div id="div1"></div>
</body>
</html>
1.若不移动滚动条，点击该div左上角会有如下结果：
2.若不移动滚动条，点击该div的右下角则有：
3.若向下移动滚动条，再次点击该div左上角，则得到如下结果：
4.若向下移动滚动条，并点击该div右下角，则：
由“2”和“4”可以看到，“offset”的值正好与其宽度和高度相等，“offset”其定位原点在当前元素左上角。
由“1”与“3”对比可以看到，“offset“与“page“的值并没有发生改变，页面滚动改变的只有“client”的值，“client”的原点在当前窗口的左上角，会随着滚动条的改变而改变。
由“1”和“3”可以看到，虽然向下移动滚动条，但是点击相同位置其“page“的值并不改变，“page”其定位原点是当前页面左上角，不随滚动条改变而改变。
JavaScript事件坐标区别（offset，client，page）的更多相关文章
- javascript事件坐标
clientX 鼠标在页面显示区域的坐标 screenX鼠标在显示屏幕上的坐标 layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从bo ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- JavaScript事件onblur与onfocus区别
一.onblur 1.1 说明 onblur属性在元素失去焦点时触发,onblur常用于表单验证代码(例如用户离开表单字段). 1.2 示例 <input type="text&quo ...
- JavaScript事件总结
JavaScript 事件总结 本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...
- javaScript事件（六）事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
随机推荐
- 在线教育项目-day05【课程分类管理-添加课程分类】
1.引入依赖 之前测试EasyExcel已经引入过了 2.利用代码生成器生成结构 我们做的只需要更改代码生成器的数据库表即可 3.运行代码生成器 4.书写代码 1.controller @RestCo ...
- Linux / mac OS Shell常用命令
一.文件.目录操作命令 1.ls命令 功能:显示文件和目录的信息 ls 以默认方式显示当前目录文件列表 ls -a 显示所有文件包括隐藏文件 ls -l 显示文件属性,包括大小,日期,符号连接,是否可 ...
- 《Cisco防火墙》一2.4 总结
本节书摘来自异步社区<Cisco防火墙>一书中的第2章,第2.4节,作者 [巴西]Alexandre M.S.P. Moraes,更多章节内容可以访问云栖社区"异步社区" ...
- 解决w3wp.exe占用CPU和内存问题
在WINDOWS2003+IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢.可以做以下配置进行改善:1.在IIS中对每个网站进行单独的应用程序池配置.即互相之间不影响.2 ...
- C++如何求程序运行时间
C++中常用clock()函数求运行时间,返回值类型为clock_t,返回值是程序运行到本次调用clock()函数经过的clock数,头文件为<time.h>. 用法: 1.求开始时间s= ...
- Character Array and Character Pointer
最近复习数据结构实验时,碰到这么一行代码,看的有点不爽. typedef char** HuffmanCode; 借此梳理下数组和指针. int* p; //指针变量p中存的地址代表的内存单元中的数据 ...
- 数学--数论--Miller_Rabin判断素数
ACM常用模板合集 #include<iostream> #include<algorithm> #include<cstring> #include<cst ...
- 图论--BFS总结
1.关于BFS的Key_word: ①hash或状态压缩记录状态 ②状态剪枝 ③反向BFS ④双向BFS ⑤特殊初始化VIS数组 ⑥动态图的搜索 ⑦优先队列优化搜索 ⑧数位搜索 下面是一一讲解: 1 ...
- Android EXCEL 解析 xls 和 xlsx，方法其实很简单
前言 Excel 解析,一般来说是在服务端进行的,但是如果移动端要实现解析Excel的功能,那也是有实现的方法的. 不过由于Android 原生用Java/Kotlin实现,所以也可以参考服务端解析E ...
- 题目分享D 二代目
题意:给定一个T条边的无向图,求S到E恰好经过N条边的最短路径 T≤100 N≤1000000 分析:(据说好像假期学长讲过) 首先很容易想到的是dp[i][j][k]表示从i到j经过k条边的最短路径 ...