pageX、clientX、screenX、offsetX、layerX、X

chrome:

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

ff:

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——无
e.clientX——相对可视区域的坐标
e.x——无

opera:

e.pageX——相对整个页面的坐标
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

safari:(这个和chrome是一样的)

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

 

IE9:

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离(这个NB轰轰了····=。=)
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE8:

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE7:

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE6:

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

 

所以考虑到兼容的时候必须这么写,

box.addEventListener("click",function(e){
getEventPosition(e);
});

function getEventPosition(ev){   
   var x, y;   
   if (ev.layerX || ev.layerX == 0) {   
       x = ev.layerX;   
       y = ev.layerY;   
   }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
       x = ev.offsetX;   
       y = ev.offsetY;   
   }   
   return {x: x, y: y};   
}   

 

2.PageX和clientX
pageX指鼠标在页面上的位置,以页面左侧为参考点
clientX指可视区域内离左侧的距离,以滚动条滚动到的位置为参考点。各个浏览器相同。
即当有滚动条时clientX  小于  pageX

//ie678不识别pageX
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度,还是直接上图比较清楚

3、screenX
鼠标在屏幕中的位置,指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。
与clientX的区别是clientX是到浏览器的距离。
 例如:当网页缩小,拖动到屏幕中间时,screnX 大于 clientX

4、offsetX和layerX
为了兼容浏览器,layerX是FF、chrome识别,offsetX是除了FF之外。

如果触发元素设置了position,则offsetX等于layerX
如果页面有滚动条,添加滚动的距离。

layerX:FF特有,是相对于父元素的位置,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父

元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF

没有直接替换的属性。

点击li,如果UL设置了position则layerX相对于UL,如果没有则向父级冒泡寻找设置了position的元素,直到根节点body。
offsetX是相对于被点击了的LI元素。

5、e.x
FF不识别
到可视区域的距离,有无滚动条相同,同clientX
opera,chrome和safari的event.x返回值和event.clientX相同
IE8910event.x返回值和event.clientX相同
ie7e.x比e.clientX少2px

时间: 2024-11-02 06:32:30

pageX、clientX、screenX、offsetX、layerX、X的相关文章

php计算几分钟前、几小时前、几天前的几个函数、类分享

 这篇文章主要介绍了php计算时间几分钟前.几小时前.几天前的几个函数.类分享,需要的朋友可以参考下 一.函数实现 实例1:    代码如下: function time_tran($the_time){    $now_time = date("Y-m-d H:i:s",time()+8*60*60);    $now_time = strtotime($now_time);    $show_time = strtotime($the_time);    $dur = $now_t

  具体操作步骤:   1、点击Win8系统资源管理器,然后在资源管理器面点击“工具”-“文件夹选项”;   2、在Win8系统文件夹选项窗口下,选择“查看”选项卡;   3、在Win8系统文件夹查看选项卡下,取消勾选“隐藏计算机文件夹中的空驱动器”和“隐藏受保护的操作系统文件”;   4、再选中“显示隐藏的文件、文件夹和驱动器”;   5、接着在Win8系统“我的电脑”面板上进入

 计算机文件夹中的空驱动器"和"隐藏受保护的操作系统文件"; 4.再选中"显示隐藏的文件.文件夹和驱动器"; 5.接着在Win8系统"我的电脑"面板上进入-win8系统修复工具"> 具体操作步骤: 1.点击Win8系统资源管理器,然后在资源管理器面点击"工具"-"文件夹选项"; 2.在Win8系统文件夹选项窗口下,选择"查看"选项卡; 3.在Win8系统文件夹查

微观、宏观、精准 多视角估算数据库性能(选型、做预算不求人)

标签 PostgreSQL , PPAS , Greenplum , HybridDB for PostgreSQL , 性能 , 估算 , pgbench , 统计细信息 , explain算法 , 统计信息导入导出 背景 在提预算时必不可少的环境是评估需要多少硬件. 通常会要求业务方提供一些数据,例如用户数.PV.UV等.但是这种评估纯靠经验,方法非常的粗糙也不准确. 那么到底如何评估需要多少硬件.或者说需要什么样规格的硬件来支撑你未来的业务呢? 对于PostgreSQL这个数据库产品来说,

java获取系统路径字体、得到某个目录下的所有文件名、获取当前路径_java

java获取系统路径字体.得到某个目录下的所有文件名.获取当前路径 复制代码 代码如下: package com.liuxing.test; import java.awt.GraphicsEnvironment;import java.io.File;public class Test {  private static GraphicsEnvironment environment; /**  * @param args  */ public static void main(String[

学习笔记DL005:线性相关、生成子空间,范数,特殊类型矩阵、向量

线性相关.生成子空间. 逆矩阵A⁽-1⁾存在,Ax=b 每个向量b恰好存在一个解.方程组,向量b某些值,可能不存在解,或者存在无限多个解.x.y是方程组的解,z=αx+(1-α),α取任意实数. A列向量看作从原点(origin,元素都是零的向量)出发的不同方向,确定有多少种方法到达向量b.向量x每个元素表示沿着方向走多远.xi表示沿第i个向量方向走多远.Ax=sumixiA:,i.线性组合(linear combination).一组向量线性组合,每个向量乘以对应标量系数的和.sumiciv⁽

反算经纬度-已知A、B点经纬度jA、wA、jB、wB和分别到C点的距离弧长AC、BC,求C点经纬度jC、wC

问题描述 已知A.B点经纬度jA.wA.jB.wB和分别到C点的距离弧长AC.BC,求C点经纬度jC.wC 已知A.B点经纬度jA.wA.jB.wB和分别到C点的距离弧长AC.BC,求C点经纬度jC.wC(二个解).方程式一:弧长AC=Rarccos(coswA*coswC*cos(jA-jC)+sinwA*sinwC)方程式二:弧长BC=Rarccos(coswB*coswC*cos(jB-jC)+sinwB*sinwC) 解决方案 有四种可能,0个解.1个解.2个解.无数多个解.0个解的情况

php函数、类和对象以及类的封装、继承、类的静态方法、静态属性

原文:php函数.类和对象以及类的封装.继承.类的静态方法.静态属性 1.函数     php内置函数可以直接使用,如果没有安装php扩展即可     自定义函数 //函数function 函数名 function dump($var = null){ //支出默认参数值 echo '<pre/>'; var_dump($var); } 2.类(class)和对象( new Obj) <?php //定义一个人的类,现在还不是对象 class Person { //私有属性 privat

用忠诚、时间、奉献来换取一家公司的地位、头衔,以及待遇

如何让自己的职场之路越走越宽,每个月短信上的工资数字越来越高,就成为了每个人在获取自由时必须考虑到的问题. 职场,是把每一个人生活支撑起来的基石.每个月银行发来的短信上的数字,只需要看一眼,就能将过去一个月里的无助.沮丧.焦虑.忍耐全部化为乌有. 工资,其实就是圆规上的那个转轴,它规定出来你在这个世界上行走的最大范围,甚至是你在超市中行进的路线.而如何让自己的职场之路越走越宽,每个月短信上的工资数字越来越高,就成为了每个人在获取自由时必须考虑到的问题. 其实它无非是两种途径.一种是用忠诚.时间.

经营分析、决策系统数据库设计 - 实时圈选、透视、估算

标签 PostgreSQL , 经营分析系统 , 手机行业 , 标签 , 圈选 , 透视 , 估值 , 决策 背景 经营分析.决策支持是现代企业的一个让数据发挥有效价值的分析型系统. 在各个行业中随处可见,例如共享充电宝中,协助销售了解实时的设备租赁情况,销售业绩.在电商中,协助小二和商户发掘目标用户群体.金融行业中,协助输出国民的存款.消费.贷款的画像. PostgreSQL, Greenplum都是非常适合于经营分析.决策支持的数据库.因为它们具备了一些特性,适合实时的分析透视.(流式计算.