通过 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. Unable to start activity ComponentInfo{com.first/com.first.Game}

    原因一: xxx的错误,若为R.layout.main  那么应该是main.xml文件中的标签 使用错误,最常见的而且编译器不会提示的错误就是 android:name 和android:id 两者 ...

  2. C语言柔性数组

    结构中最后一个元素允许是未知大小的数组,这个数组就是柔性数组.但结构中的柔性数组前面必须至少一个其他成员,柔性数组成员允许结构中包含一个大小可变的数组,sizeof返回的这种结构大小不包括柔性数组的内 ...

  3. C++中static类成员

    static局部变量 static局部变量确保不迟于在程序执行流程第一次经过该对象的定义语句时进行初始化 这种对象一旦被创建,在程序结束前不会被撤销.在该函数被多次调用的过程中,静态局部对象会持续存在 ...

  4. iOS开发笔记12:iOS7上UITextField限制字数输入导致崩溃问题

    在一些场景中,需要限制用户的输入字数,例如在textField里进行控制(textView也类似,崩溃原因也相同),如图所示 系统会监听文本输入,需要注意的第一点是输入法处于联想输入还未确定提交的时候 ...

  5. Swift中的字典

    学习来自<极客学院:Swift中的字典> 工具:Xcode6.4 直接上基础的示例代码,多敲多体会就会有收获:百看不如一敲,一敲就会 import Foundation //字典的声明 v ...

  6. android 小记

    1.INSTALL_FAILED_INSUFFICIENT_STORAGE 手机内存不够,删除部分后即可安装.

  7. Cron 表达式详解和案例

    1. cron表达式格式: {秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)} 2. cron表达式各占位符解释: {秒数} ==> 允许值范围: 0~59 ,不允许 ...

  8. su su -

    http://www.ha97.com/4001.html su命令和su -命令最大的本质区别就是:前者只是切换了root身份,但Shell环境仍然是普通用户的Shell:而后者连用户和Shell环 ...

  9. java 接收 char字符型

    import java.io.BufferedReader;import java.io.InputStreamReader;import java.util.Scanner; public clas ...

  10. [转]Android输出Log到文件

    前言:开发中遇到mx4这款机型Eclipse联调不上,logcat看不了,需要输出生成文件查看调试信息.网上搜了下,功能很完善了.startService和过滤输出信息需要自己添加设置,另外注意添加权 ...