通过 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. 实验三同学评论http://home.cnblogs.com/u/MyDring/

    47赖燕菲http://www.cnblogs.com/lyfzero/ :该同学实验整体思路较清晰,希望把完整代码发布出来. 48李小娜http://www.cnblogs.com/dmbs/ :该 ...

  2. miniSipServer简单而不简单，轻松落地，实现电脑对固话、手机通讯

    最近沉迷于SIP通讯,网内通讯全免费,落地也就几分钱,而且无漫游全国拨打,想想真是心动呢,只要有网落就ok!. 对于sipserver,现在的市场上软件很多,免费的.收费的应有尽有,这里不一一例举.综 ...

  3. 如何在树莓派上运行雷神之锤III

    昨天在树莓派上尝试运行了一下雷神之锤III,流畅运行,效果不错~~~ RPI这个小身板的东东总是可以给你带来惊喜,这里记录一下步骤以备后续再用 先确保RPI的程序和固件都已经更新 sudo apt-g ...

  4. Linux平台Makefile文件的编写基础入门（课堂作业）

    根据老师的要求,写一个超简单的makefile准备:       准备三个文件:file1.c, file2.c, file2.h       file1.c: #include "file ...

  5. Redis介绍及常用命令

    一 Redis介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发 ...

  6. Android项目实战（十一）：moveTaskToBack(boolean ) 方法的使用

    当你开发的程序被按后退键退出的时候, 你肯定不想让他就这么被finish()吧,那么就想把程序退置到后台就可. (类似于PC端,你关闭一个浏览器和你最小化一个浏览器的区别) 参看方法:public b ...

  7. Saiku 下载，安装

    Saiku是一个模块化的开源分析套件,它提供轻量级的OLAP(联机分析处理),并且可嵌入.可扩展.可配置. 主页:http://community.meteorite.bi 如何安装摘自: http: ...

  8. [LoadRunner]录制启动时报“The JVM could not be started……”错误解决方案

    在LR准备点击录制java over http协议时,程序报如下错误: 报错提示是设置的JVM值设置问题,导致不能启动. 解决方案一 点击F4快捷按钮,会弹出以下界面,在选中的位置选择对应的java路 ...

  9. python基本数据结构-集合-集合运算

  10. EasyUI ComboGrid 分页

    一.使用场景 下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入.在EasyUI中有ComboGrid与之对应.ComboGrid既可以当中下拉框来使用,又可以 ...