学习笔记。

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）的更多相关文章

  1. javascript事件坐标

    clientX 鼠标在页面显示区域的坐标 screenX鼠标在显示屏幕上的坐标 layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从bo ...

  2. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  3. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  4. JavaScript事件onblur与onfocus区别

    一.onblur 1.1 说明 onblur属性在元素失去焦点时触发,onblur常用于表单验证代码(例如用户离开表单字段). 1.2 示例 <input type="text&quo ...

  5. JavaScript事件总结

    JavaScript 事件总结   本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...

  6. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  7. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  8. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  9. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

随机推荐

  1. Libra教程之:Libra protocol的逻辑数据模型

    文章目录 Libra protocol简介 逻辑数据模型 账本状态 交易 账本历史 Libra protocol简介 Libra区块链本质上是一个加密数据库,这个数据库是通过Libra protoco ...

  2. weblogic创建域

    一.webLogic服务域创建 https://blog.csdn.net/github_38922197/article/details/75097320

  3. HDU 5725 Game

    1. 笔记 题意是求距离的期望(距离仍指连接两点且有效的路径长度的最小值).直观想象可以发现,该距离与曼哈顿距离相比最多多2(可以构造这样的路径). 答案=(任意两点曼哈顿距离的总和 - 至少有一点是 ...

  4. WebRTC 及点对点网络通信机制

    原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理第十八章. 概述 何为 WebRTC ?首先,字面上已经给出了关于 ...

  5. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  6. System Call

    内容 设计系统调用,将系统的相关信息(CPU型号.操作系统的版本号.系统中的进程等类似于Windows的任务管理器的信息)以文本形式列表显示于屏幕,并编写用户程序予以验证. 思想 系统调用是应用程序和 ...

  7. POJ 1905 Expanding Rods（二分）

    Expanding Rods Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 20224 Accepted: 5412 Descr ...

  8. 前端——localStorage详细总结

    一.localStorage简介: 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cooki ...

  9. SpringBoot：Demo

    目录 Demo 准备工作 登录+拦截器 Restful CRUD Restful架构 查询所有员工 添加员工 员工修改功能 HiddenHttpMethodFilter 删除员工 定制错误页面 注销功 ...

  10. mybatis与hibernate运行流程比较

    hibernate长时间没用,感觉生疏了,正好借这篇文章整合下知识,顺便复习比较下两种框架. 概述: Mybatis和hibernate不同,它不完全是一个ORM框架,因为MyBatis需要程序员自己 ...