通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。

一、测试代码如下：

<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>Javascript</title>

<style>

body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}

.main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}

.box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}

</style>

</head>  

<body style="height:1600px;">

<div class="main">

    <div class="box" id="box"></div>

</div>  

<script>

var oBox = document.getElementById('box');  

window.onload = function(){  

    oBox.onmousedown = function(ev){

        ev = ev || window.event;  

        console.log(ev.offsetX, ev.offsetY);

        console.log(ev.clientX, ev.clientY);

        console.log(ev.pageX, ev.pageY);

        console.log(ev.screenX, ev.screenY);

        console.log(ev.layerX, ev.layerY);

        console.log(ev.x, ev.y);

    }

}  

</script>

</body>

</html>

二、不同浏览器对这些属性的支持：

三、图解 event.offsetX，event.clientX，event.pageX，event.screenX属性

点击这里查看大图

四、图解 event.layerX，event.layerY 属性

点击这里查看大图

五、图解 event.x，event.y 属性

点击这里查看大图

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

六、Jquery 兼容写法

jQuery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

<script>

$(function(){

    $("#box").mousedown(function(event){

        console.log(event.offsetX, event.offsetY);

        console.log(event.clientX, event.clientY);

        console.log(event.pageX, event.pageY);

        console.log(event.screenX, event.screenY);  

        /* firefox */

        console.log(event.originalEvent.layerX, event.originalEvent.layerY);

    });

});

</script>

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别的更多相关文章

  1. Js event对象offsetX，pageX，screenX，clientX详解

       平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用.   检测相对于浏览器的位置:clientX和clientY     当鼠标事件发生时,鼠标相对于浏览器左上 ...

  2. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  3. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

  4. 一张图看懂offsetX, clientX, pageX, screenX的区别

    1.具体含义见下图1 2.浏览器的兼任情况

  5. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  6. event对象的clientX,offsetX,screenX,pageX

    chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...

  7. clientX,pageX,screenX，offsetLeft，scrollTop

    出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...

  8. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  9. js Event对象

    (事件阶段)Event Phases Event对象在event第一次触发的时候被创建出来,并且一直伴随着事件在DOM结构中流转的整个生命周期.event对象会被作为第一个参数传递给事件监听的回调函数 ...

随机推荐

  1. css三角形的实现

    实底三角形: <html> <head> <title></title> <style type="text/css"> ...

  2. atitit.mp4 视频文件多媒体格式结构详解

    atitit.mp4 视频文件多媒体格式结构详解 1. 一.基本概念1 2. MP4文件概述2 3. mp4是由一个个“box”组成的,2 4. 典型简化mp43 5. Fragments5 6. r ...

  3. Oracle数据库中创建表空间语句

    1:创建临时表空间 create temporary tablespace user_temp tempfile 'Q:\oracle\product\10.2.0\oradata\Test\xyrj ...

  4. 由于无法在数据库 'TestNonContainedDB' 上放置锁 ALTER DATABASE 失败

    Error: 消息5601,级别16,状态1,第1行,由于无法在数据库 'TestNonContainedDB' 上放置锁,ALTER DATABASE 失败.请稍后再试.消息5069,级别16,状态 ...

  5. JAVA基础学习day26--正则表达式

    一.正则表达式 1.1.概述 符合一规则的表达式:用于专门操作字符串. 正则表达式则必须依靠Pattern类与Matcher类,这两个类都在java.util.regex包中定义.Pattern类的主 ...

  6. Retrofit源码设计模式解析（上）

    Retrofit通过注解的方法标记HTTP请求参数,支持常用HTTP方法,统一返回值解析,支持异步/同步的请求方式,将HTTP请求对象化,参数化.真正执行网络访问的是Okhttp,Okhttp支持HT ...

  7. block的用法以及block和delegate的比较（转发）

    看到一篇写的关于block和delegate放在一起来方便大家理解的文章,感觉不错,就推荐给大家来看一下. 代理设计模式对于iOS开发的人来说肯定很熟悉了,代理delegate就是委托另一个对象来帮忙 ...

  8. UVa 106 - Fermat vs Pythagoras（数论题目）

    题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...

  9. 关于git

    一.Git基础教程  01.[入门练习]廖雪峰 git教程网:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8 ...

  10. linux搭建mysql 5.6.28

    1.下载rmp文件 http://dev.mysql.com/downloads/mysql/ 2.安装 rpm -ivh MySQL-server--.linux_glibc2..x86_64.rp ...