【clientX】clientX pageX offsetX x layerX screenX offsetLeft区别分析-pageX--offsetX-x-layerX

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析】，下面是详细的讲解！

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的问题。

关于clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析的用户互动如下：

　　相关问题：在js中clientx和screenx有什么区别

　　答：1. 针对当前鼠标点击的点的位置到某部分的距离 2. clientX: 鼠标当前点击位置到窗口可视区域0的距离, screenX也是一样 X:鼠标当前点击位置到参考元素(父元素)边框距离, 如果是TD相对Table则有 左cellpadding + 左cellspacing + border + cellpad... >>详细

　　相关问题：关于JavaScript在ie和ff的区别

　　答：js本身没有差异，主要是对dom节点及window本身对象的和属性上有差异。比较好的建议是使用第三方js库，比如jquery等，这些考虑了浏览器兼容性，自己可以少考虑些。 对于一些常用的属性都差异不大，因此也不用过分担忧。 部分差异如下： window.ev... >>详细

　　相关问题：javascript和IE8兼容问题 请大家帮忙 clientX函数...

　　答：你的方法应该是ie8下可用。我用win7+ie8测试可行。但是chrome下不可用。可以试试下面的方法 function handleEvent(e) { var evt = e ? e : window.event; var clickX = 0, clickY = 0; if ((evt.clientX || evt.clientY) && document.body && do... >>详细