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` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
在JavaScript中,处理鼠标事件时,经常会遇到一系列与鼠标位置相关的属性,如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
本文将详细介绍`clientX`、`screenX`、`pageX`、`offsetX`等坐标系统的概念及其差异,并通过实例来帮助理解这些概念。 #### 二、`pageX`与`pageY` **定义:** `pageX`与`pageY`表示鼠标相对于整个文档的X轴和Y轴的...
a.pageX) a.pageX = a.clientX; if (!a.pageY) a.pageY = a.clientY; // 记录鼠标按下时div的初始位置 var x = a.pageX, y = a.pageY; // 如果浏览器支持,设置捕获鼠标事件 if (o.setCapture) o.setCapture...
通过使用 `event.clientX`、`event.clientY` 以及 `event.pageX`、`event.pageY`,我们可以有效地获取用户鼠标点击位置的信息。对于需要考虑页面滚动情况的应用场景来说,推荐使用 `pointerX()` 和 `pointerY()` ...
// 如果页面不支持 pageX 和 pageY,则使用 clientX 和 clientY 进行计算 return { x: event.clientX + document.body.scrollLeft - document.body.clientLeft, y: event.clientY + document.body.scrollTop - ...
2. **事件对象(Event Object)**:了解`event`对象及其属性如`pageX`、`pageY`、`clientX`和`clientY`等,这些属性可以获取鼠标相对于浏览器视口的位置。 3. **DOM 操作**:利用`getElementById`方法获取页面元素,...
3. **坐标参考系**:理解`clientX`、`clientY`和`pageX`、`pageY`的区别,前者相对可视窗口,后者相对整个文档,这在处理复杂的布局和动态页面时尤为重要。 总之,无论是通过JQuery还是原生JavaScript,获取鼠标...
FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event.offsetX和event.offsetY。 FF:event.layerX和event.layerY。 标签的x和y的坐标...
var pageX = event.clientX + window.pageXOffset; var pageY = event.clientY + window.pageYOffset; ``` 这样,`pageX` 和 `pageY` 将给出相对于整个文档的坐标,而不是仅仅限于可视窗口。 总结起来,通过...
对于大部分现代浏览器,如Chrome、Safari、Firefox等,可以使用`event.clientX`和`event.clientY`来获取页面坐标。这两个属性分别代表了鼠标水平和垂直方向上的距离,以像素为单位,是从浏览器窗口的左上角开始计算...
取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置...
通过结合`pageX/pageY`、`clientX/clientY`、`scrollLeft/scrollTop`以及`offsetX/offsetY`或`layerX/layerY`,我们可以编写兼容不同浏览器的函数,获取鼠标在页面或元素内的精确位置。这在实现动态效果、交互式界面...
- 当处理滚动时,`pageX`和`pageY`会考虑页面的滚动位置,而`clientX`和`clientY`则不会。 - 在移动设备上,由于触摸操作,可能需要监听`touchmove`事件而非`mousemove`。 5. **示例代码** 下面是将鼠标坐标显示...
screenY 鼠标相对于显示器屏幕左上角的偏移 ... // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && original.clientX != null ) { eventDoc = event.target.ownerDocum
在IE中,我们需要访问`event.clientX`和`event.clientY`属性,而在Firefox和其他遵循W3C标准的浏览器中,应该使用`event.pageX`和`event.pageY`。 下面是一个基本的示例代码,展示了如何在IE和Firefox中获取鼠标...
在大多数现代浏览器中,可以通过`event.clientX`和`event.clientY`属性获取到这些坐标。 3. **火狐浏览器的特殊性**: Firefox浏览器在处理鼠标坐标时与其他浏览器略有不同。在Firefox中,`event.clientX`和`event...