pageX\pageY & layerX\layerY
<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 returnlayerX/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/layerYvalues that are relative to the top-left corner of this positionedelement. Note the pageX\pageY properties still return theabsolute position in the document, including page scrolling.</span><span>Make the page scroll more! This is a positioned div so clicking itwill return layerX/layerY values that are relative to the top-leftcorner of this positioned element. Note the pageX\pageY properties stillreturn the absolute position in the document, including pagescrolling.</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>
页:
[1]