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区别分析,需要的朋友可以参考下。
NULL 博文链接:https://meizhi.iteye.com/blog/576133
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
javascript获取指针的位置的方法:使用事件对象的pageX和pageY,或者clientX和clientY属性,并且配合scrollLeft和scrollTop属性,这样就可以计算出指针的位置了。 本文操作环境:windows10系统、javascript 1.8.5...
FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event.offsetX和event.offsetY。 FF:event.layerX和event.layerY。 标签的x和y的坐标...
主要介绍了微信小程序 页面滑动事件的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下
取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置...
本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码,供大家参考,具体内容如下 实现思路 1、给 document 绑定 mousemove 事件,获取鼠标的坐标:e.pageX ,e.pageY 2、将图片设置成绝对定位:...
copy来的,但是原页面的代码还是需要修改,下面是修改... 代码如下: function pointerX(event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); } fun
screenY 鼠标相对于显示器屏幕左上角的偏移 ... // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && original.clientX != null ) { eventDoc = event.target.ownerDocum
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
回调函数的参数回调函数里面的参数event包含4个属性:pagex,pageY,clientX,clientY,screenX,screenY,direction,displacementX,displacementY.screenX事件发生时手指触摸位置距离屏幕左上角的X方向(水平)距离.screenY...
简易拖拽 ... offsetX,clientX,pageX的辨析 下载源码链接 代码实例 <div id=box xss=removed></div> (function () { var dragging = false var boxX, boxY, mouseX, mouseY, offsetX, offsetY
evt.clientX 相对于浏览器的客户端左上角为原点(不计算滚动条位置) evt.clientY evt.pageX 相对于浏览器的客户端左上角为原点(计算滚动条的位置) evt.pageY evt.offsetX 以自己的左上角为原点 evt.offsetY ...
Swiper-master是纯...重要属性如下:clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY:触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID
代码如下: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的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || ...pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加 上水平滚动条的距离 pageY:鼠
要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || ...pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加 上水平滚动条的距离 pageY:鼠
pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变; clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离,会随着滚动条滚动而改变; 1....