clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

screenX:鼠标在显示屏幕上的坐标。
clientX:鼠标在页面显示区域的坐标。
注：以上两个都是各浏览器通用的。

pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。
layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。
offsetX:IE特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便，FF没有直接替换的属性。
x：IE特有，跟layerX一个效果，可作为layerX的直接替换属性。
注：IE和FF的定位有个1px的差别，实际上，IE的定位从0开始，FF的定位从1开始，FF永远会比IE大1px，需要根据实际情况处理。

offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，虽然话是这么说的，但是不同的浏览器效果不一样，FF中严格按上述说明执行，但是在IE6/7中，这个属性返回该DOM对象在其直接父对象中的位置，但是IE8改正了这个问题，不过IE8又有了一个新问题，其他的浏览器都是从父对象的内容区域的左上角开始定位，IE8确是从父元素的border的左上角开始定位，由于测试环境为IETester中的IE8，不能排除是IETester的问题。

赞 (0)

相关推荐

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

  • 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

    问题: 如何取到页面中任意某个Html元素与body元素之间的偏移距离? offsetTop和offsetLeft 这两个属性,IE .Opera和Firefox对它俩的解释存在差异: IE5.0+ .Opera8.0+: offsetTop和offsetLeft 都是相对父级元素 Firefox1.06: offsetTop和offsetLeft 都是相对于body元素 因此: (1)在FF下直接使用offsetTop和offsetLeft,就可以取到页面中任意某个Html元素与body元素之

  • 谈谈对offsetleft兼容性的理解

    关于此属性的基本用法可以参阅offsetleft属性用法详解一章节. 此属性具有一定的兼容性问题,那就是在IE7浏览器中,它的返回值是想对于最近的父辈元素的左侧的距离. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" />

  • 获取offsetTop和offsetLeft值的js代码(兼容)

    复制代码 代码如下: function offsetTop( elements ){ var top = elements.offsetTop; var parent = elements.offsetParent; while( parent != null ){ top += parent.offsetTop; parent = parent.offsetParent; }; return top; }; function offsetLeft( elements ){ var left =

  • 详解 javascript中offsetleft属性的用法

    此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

  • 浅析offsetLeft,Left,clientLeft之间的区别

    浅析offsetLeft,Left,clientLeft之间的区别

    假设 obj 为某个 HTML 控件 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素. obj.offsetHeight 指 obj

  • javascript中style.left和offsetLeft的用法说明

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. st

  • JS小功能(offsetLeft实现图片滚动效果)实例代码

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

  • clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    screenX:鼠标在显示屏幕上的坐标. clientX:鼠标在页面显示区域的坐标. 注:以上两个都是各浏览器通用的. pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性. layerX:FF特有,鼠标相对于"触发事件的元素的层级关系中离该元素最近的,设置了position的父元素"的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上

  • javascript offsetX与layerX区别

    一个简单的例子:判断鼠标位于事件源左边还是右边,在图片点击自动翻页中常用到. 复制代码 代码如下: function GetMousePosStr (evnt,ele) { if(!evnt) { evnt = window.event; } var offsetX = evnt.offsetX ? evnt.offsetX : evnt.layerX; if(evnt.offsetX < ele.offsetWidth / 2) { return 'left'; } else { return

  • JS和JQ的event对象区别分析

    代码测试: 复制代码 代码如下: <div id="test"><p>test text<p></div> <script src="vendor/jquery-2.1.1.js"></script> <script> test.addEventListener('click', function(e){console.log(e);}, false), $('#test').on(

  • jQuery中.attr()和.data()的区别分析

    $.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别. Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app&q

  • C#中String与string的区别分析

    C#中String与string的区别分析

    本文实例展示了C#程序设计中String与string的区别,对于C#初学者来说有很好的参考借鉴价值.具体如下: 一.区别分析: String:类,System.String string:类型,变量 两者本质上没有任何区别,都是System.String,string只是System.String的别名而已 唯一的区别在于如何按照代码约定的来写,如声明变量时使用小写string,使用System.String下方法时使用大写的String 二.示例代码如下: class Program { s

  • Android中的Dalvik和ART详解及区别分析

    要想知道Dalvik和ART区别分析,首先我们要分别知道这两者是什么? 什么是Dalvik? Dalvik是Google公司自己设计用于Android平台的虚拟机. Dalvik虚拟机是Google等厂商合作开发的Android移动设备平台的核心组成部分之一. 它可以支持已转换为 .dex格式的Java应用程序的运行,.dex格式是专为Dalvik设计的一种压缩格式,适合内存和处理器速度有限的系统. Dalvik 经过优化,允许在有限的内存中同时运行多个虚拟机的实例,并且每一个Dalvik 应用

  • VC中CWinThread类以及和createthread API的区别分析

    本文实例讲述了VC中CWinThread类以及和createthread API的区别分析,分享给大家供大家参考.具体分析如下: CWinThread CObject  └CCmdTarget     └CWinThread CWinThread对象代表在一个应用程序内运行的线程.运行的主线程通常由CWinApp的派生类提供:CWinApp由CWinThread派生.另外,CWinThread对象允许一给定的应用程序拥有多个线程. CWinThread支持两种线程类型:工作者线程(Worker

  • 面试题：react和vue的区别分析

    react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开发中使用. 但是他们到底有啥区别呢?这个就是我们这篇文章所需探讨并学习的. 开始! MVC 和 MVVM 首先,来说明下这些字母代表的含义 M:Model 模型 V:View 视图 C:Controller 控制器 VM:ViewModel 视图模型 首先说下MVC,大家肯定也知道三大框架中的另外一个(anuglar). 如果你写过angular那就肯定能很清楚的了解这个含义,看如下代码: <input n

  • C++ 虚函数和纯虚函数的区别分析

    首先:强调一个概念 定义一个函数为虚函数,不代表函数为不被实现的函数. 定义他为虚函数是为了允许用基类的指针来调用子类的这个函数. 定义一个函数为纯虚函数,才代表函数没有被实现. 定义纯虚函数是为了实现一个接口,起到一个规范的作用,规范继承这个类的程序员必须实现这个函数. 简介 假设我们有下面的类层次: class A { public: virtual void foo() { cout<<"A::foo() is called"<<endl; } }; cl

  • C#中Write()和WriteLine()的区别分析

    Write()和WriteLine()都是System.Console提供的方法,两着主要用来将输出流由指定的输出装置(默认为屏幕)显示出来. 两着间的差异在 Console.WriteLine()方法是将要输出的字符串与换行控制字符一起输出,当次语句执行完毕时,光标会移到目前输出字符串的下一行. 至于Console.Write()方法,光标会停在输出字符串的最后一个字符后,不会移动到下一行. Write()和WriteLine()区别 都是System.Console提供的方法 都是在屏幕显示

随机推荐