通过 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. 新著作计划：《水利水电工程施工导流 水力计算与.NET编程》

    目   录 第一篇 基础理论篇 第1章 施工导截流设计概述 第2章 基本水力计算 2.1 临界水深计算 2.2 正常水深计算 2.3 堰流水力计算 2.4 明渠流水力计算 2.5 管流水力计算 第3章 ...

  2. Unable to start activity ComponentInfo{com.first/com.first.Game}

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

  3. i++是否原子操作

    i++是否原子操作 不是原子操作.理由: 1.i++分为三个阶段: 内存到寄存器 寄存器自增 回内存 这三个阶段中间都可以被中断分离开.  2.++i首先要看编译器是怎么编译的, 某些编译器比如VC在 ...

  4. bash shell命令（1）

    本文地址:http://www.cnblogs.com/archimedes/p/bash-shell1.html,转载请注明源地址. ls命令 ls用来列出目录的内容,它是用户最常用的命令之一,ls ...

  5. iOS 编译报错

    Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...

  6. mod_slotmem mod_manager mod_proxy_cluster mod_advertise Permission denied

    restorecon /etc/httpd/modules/mod_slotmem.so

  7. 后台API服务的设计考虑

    我在<写在最前>里说过,后台API的文档至关重要.不过,文档只是外在表现形式,设计才是真正的灵魂.我在这篇博文主要介绍的就是我在后台开发过程中,设计API时的考虑.我只说他是考虑,因为很多 ...

  8. Oracle日期周详解IW

    1 ORACLE中周相关知识描述 1.1           日期格式化函数 TO_CHAR(X [,FORMAT]):将X按FORMAT格式转换成字符串.X是一个日期,FORMAT是一个规定了X采用 ...

  9. 深入PHP内核之面向对象总结

    很久以前看过的,今天总结一下 一.PHP中创建一个类 在PHP中创建一个简单的类是这样的: <?php $obj = new test($url) ?> 二.zend_class_entr ...

  10. 软件测试作业3--Junit、hamcrest、eclemmat的安装和使用

    1.   how to install junit, hamcrest and eclemma? 首先下载下来Junit和Hamcrest的jar包,然后新建项目的时候将这两个jar包导入到工程里面就 ...