<html>
<head>
<title>pageX\pageY & layerX\layerY example</title>
<script type="text/javascript">
function showCoords(evt){
var form = document.forms.form_coords;
var parent_id = evt.target.parentNode.id;
form.parentId.value = parent_id;
form.pageXCoords.value = evt.pageX;
form.pageYCoords.value = evt.pageY;
form.layerXCoords.value = evt.layerX;
form.layerYCoords.value = evt.layerY;
}
</script>
<style type="text/css">
#d1 {
border: solid blue 1px;
padding: 20px;
}
#d2 {
position: absolute;
top: 180px;
left: 80%;
right:auto;
width: 40%;
border: solid blue 1px;
padding: 20px;
}
#d3 {
position: absolute;
top: 240px;
left: 20%;
width: 50%;
border: solid blue 1px;
padding: 10px;
}
</style>
</head>
<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates please click anywhere on the page.</p>
<div id="d1">
<span>This is an un-positioned div so clicking it will return
layerX/layerY values almost the same as pageX/PageY values.</span>
</div>
<div id="d2">
<span>This is a positioned div so clicking it will return layerX/layerY
values that are relative to the top-left corner of this positioned
element. Note the pageX\pageY properties still return the
absolute position in the document, including page scrolling.</span>
<span>Make the page scroll more! This is a positioned div so clicking it
will return layerX/layerY values that are relative to the top-left
corner of this positioned element. Note the pageX\pageY properties still
return the absolute position in the document, including page
scrolling.</span>
</div>
<div id="d3">
<form name="form_coords">
Parent Element id: <input type="text" name="parentId" size="7" /><br />
pageX:<input type="text" name="pageXCoords" size="7" />
pageY:<input type="text" name="pageYCoords" size="7" /><br />
layerX:<input type="text" name="layerXCoords" size="7" />
layerY:<input type="text" name="layerYCoords" size="7" />
</form>
</div>
</body>
</html>
分享到：
相关推荐
在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...
通过结合`pageX/pageY`、`clientX/clientY`、`scrollLeft/scrollTop`以及`offsetX/offsetY`或`layerX/layerY`，我们可以编写兼容不同浏览器的函数，获取鼠标在页面或元素内的精确位置。这在实现动态效果、交互式界面...
在Firefox中，layerX和layerY提供了鼠标相对于事件源元素左上角的坐标，但这个属性在其他浏览器中可能不可用或行为不一致。 5. **screenX 和 screenY**： 这两个属性表示鼠标指针相对于屏幕左上角的位置，而不是...
* layerX和layerY：事件发生时鼠标相对于目标元素的父元素的X/Y坐标 * pageX和pageY：事件发生时鼠标相对于网页的X/Y坐标 * clientX和clientY：事件发生时鼠标相对于浏览器左上角的X/Y坐标 * screenX和screenY：事件...
FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标...
1. **浏览器兼容性**：虽然现代浏览器普遍支持`pageX`和`pageY`，但在处理旧版浏览器时，仍需使用`clientX`、`clientY`、`scrollLeft`、`scrollTop`等属性进行兼容性处理。 2. **性能考虑**：频繁触发`mousemove`...
if(e.layerX && e.layerY){ return {x:e.layerX,y:e.layerY}; } else { return {x:e.x,y:e.y}; } } function absolutePos(e){ if(e.pageX && e.pageY){ return {x:e.pageX,y:e.pageY}; } else { var x = ...
FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标...
FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标...
FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y...
Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离) 3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离) 4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event...
- **鼠标位置（不考虑滚动条）**：IE使用event.x和event.y，FF使用event.pageX和event.pageY。通用做法是使用event.clientX和event.clientY。 - **鼠标位置（考虑滚动条）**：IE使用event.offsetX和event.offsetY...
例如，`event.offsetX/Y`、`event.layerX/Y`、`event.x/y` 和 `event.pageX/pageY` 在某些情况下可能提供相同的信息，但它们在不同浏览器中的行为并不一致。在编写兼容性良好的 JavaScript 代码时，开发者通常需要...
如果`x`和`y`不可用，我们可以通过`layerX`和`layerY`来获取坐标。如果没有这些，就设置为0。最终，坐标值将被添加到`<div>`的文本中。 ```javascript 放在我上面 $('#testDiv').mousemove(function(e) { var xx...
- **鼠标当前坐标**：IE使用event.x和event.y，FF使用event.pageX和event.pageY。通用方法是使用event.clientX和event.clientY。 - **鼠标坐标加上滚动条距离**：IE使用event.offsetX和event.offsetY，FF使用event...
- Mozilla的`event.layerX`和`event.layerY`起相同作用。同样，需要自定义处理以实现兼容性。 6. **事件绑定**： - IE使用`attachEvent`和`detachEvent`来添加和移除事件监听器，事件名称需带有`on`前缀，如`...
return e.pageX || e.clientX + document.body.scrollLeft; } function getY(e) { e = e || window.event; return e.pageY || e.clientY + document.body.scrollTop; } // 获取鼠标相对于当前元素位置的函数 ...
例如，在IE中，可以使用`event.clientX`和`event.clientY`，而在Firefox中，则需要使用`event.pageX`和`event.pageY`。为了统一处理，可以采用以下方法： ```javascript function test(event) { var event = event...