`

clientX pageX

阅读更多

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区别分析

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析,需要的朋友可以参考下。

    [转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别

    NULL 博文链接:https://meizhi.iteye.com/blog/576133

    鼠标事件clientX、clientY

    clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY

    【JavaScript源代码】教你javascript如何获取指针的位置.docx

     javascript获取指针的位置的方法:使用事件对象的pageX和pageY,或者clientX和clientY属性,并且配合scrollLeft和scrollTop属性,这样就可以计算出指针的位置了。 本文操作环境:windows10系统、javascript 1.8.5...

    整理的比较全的event对像在ie与firefox浏览器中的区别

    FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event.offsetX和event.offsetY。 FF:event.layerX和event.layerY。 标签的x和y的坐标...

    微信小程序 页面滑动事件的实例详解

    主要介绍了微信小程序 页面滑动事件的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下

    JS获取鼠标坐标位置实例分析

    取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置...

    【JavaScript源代码】javascript实现跟随鼠标移动的图片.docx

     本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码,供大家参考,具体内容如下 实现思路 1、给 document 绑定 mousemove 事件,获取鼠标的坐标:e.pageX ,e.pageY 2、将图片设置成绝对定位:...

    js获取鼠标点击的位置实现思路及代码

    copy来的,但是原页面的代码还是需要修改,下面是修改... 代码如下: function pointerX(event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); } fun

    鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

    screenY  鼠标相对于显示器屏幕左上角的偏移 ... // Calculate pageX/Y if missing and clientX/Y available  if ( event.pageX == null && original.clientX != null ) {  eventDoc = event.target.ownerDocum

    js 鼠标拖动对象 可让任何div实现拖动效果

    js鼠标拖动对象: 代码如下: //定义鼠标拖动...a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var x=a.pageX,y=a.pageY; if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.cap

    touch:轻量级移动端触摸手势库

    回调函数的参数回调函数里面的参数event包含4个属性:pagex,pageY,clientX,clientY,screenX,screenY,direction,displacementX,displacementY.screenX事件发生时手指触摸位置距离屏幕左上角的X方向(水平)距离.screenY...

    js实现简易拖拽的示例

    简易拖拽 ... offsetX,clientX,pageX的辨析 下载源码链接  代码实例 <div id=box xss=removed></div> (function () { var dragging = false var boxX, boxY, mouseX, mouseY, offsetX, offsetY

    vue实现拖拽效果

    evt.clientX 相对于浏览器的客户端左上角为原点(不计算滚动条位置) evt.clientY evt.pageX 相对于浏览器的客户端左上角为原点(计算滚动条的位置) evt.pageY evt.offsetX 以自己的左上角为原点 evt.offsetY ...

    Swiper-master touchjs-master TweenJS-master zepto-master

    Swiper-master是纯...重要属性如下:clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY:触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID

    javascript获取鼠标位置部分的实例代码(兼容IE,FF)

    代码如下:var xPos; var yPos; [removed] = mouseMove... } function mouseCoords(ev) { if (ev.pageX ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x:ev.clientX+document.

    JavaScript拖拽效果

    要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || ...pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加 上水平滚动条的距离 pageY:鼠

    JavaScript实现拖拽效果

    要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || ...pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加 上水平滚动条的距离 pageY:鼠

    vue实现拖拽的简单案例 不超出可视区域

    pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变; clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离,会随着滚动条滚动而改变; 1....

Global site tag (gtag.js) - Google Analytics