附上代码：
<!DOCTYPE html>
<html>
<head>
<script>
function mousePosition(evt){
evt = evt || windowevent;
var xPos = evtpageX || evtclientX || evtoffsetX || evtx;
var yPos = evtpageY || evtclientY || evtoffsetY || evty;
return [xPos, yPos];
}
function moveWindow (e) {
documentonmousemove = function(e){
resultinnerHTML = mousePosition(e);
};
}
onload = moveWindow;
</script>
</head>
<body>
<div id="result">
<!-- 展示结果 -->
</div>
</body>
</html>
是指Script生成的iframe吧？理论上，iframe内的页面和parent页只有上下级关系，所以鼠标在iframe内的坐标应该不能在父页获取。你可以用documentgetElementById("iframe1")contentDocument得到iframe的document对象，之后 *** 作它得到iframe内的坐标，再与父页中iframe标签左上角坐标叠加就可以。
eventclientX,设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。eventclientY, 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：
html代码如下：
[html] view plain copy
<html>
<head></head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >
Your browser does not support the canvas element
</canvas>
<script type="text/javascript" src="abcjs">
</script>
</div>
</body>
</html>
其中abcjs文件中的代码如下：
[javascript] view plain copy
function mousePos(e)
{//获取鼠标所在位置的坐标，相对于整个页面
var x,y;
var e = e||windowevent;
return {
x:eclientX+documentbodyscrollLeft + documentdocumentElementscrollLeft,
y:eclientY+documentbodyscrollTop + documentdocumentElementscrollTop
};
}
function getCanvasPos(canvas,e)
{//获取鼠标在canvas上的坐标
var rect = canvasgetBoundingClientRect();
return {
x: eclientX - rectleft (canvaswidth / rectwidth),
y: eclientY - recttop (canvasheight / rectheight)
};
}
function draw(e)
{
var c=documentgetElementById("myCanvas");
var cxt=cgetContext("2d");
cxtclearRect(0,0,cwidth,cheight);
cxtfillStyle="#FF0000";
cxtbeginPath();
//cxtarc(mousePos(e)x,mousePos(e)y,15,0,MathPI2,true);
cxtarc(getCanvasPos(c,e)x,getCanvasPos(c,e)y,15,0,MathPI2,true);
cxtclosePath();
cxtfill();
}
<title>Js获取适时获取鼠标坐标值并显示</title>
<script type="text/javascript">
var getCoordInDocumentExample = function(){
var coords = documentgetElementById("coords");
coordsonmousemove = function(e){
var pointer = getCoordInDocument(e);
var coord = documentgetElementById("coord");
coordinnerHTML = "X,Y=("+pointerx+", "+pointery+")";
}
}
var getCoordInDocument = function(e) {
e = e || windowevent;
var x = epageX || (eclientX +
(documentdocumentElementscrollLeft
|| documentbodyscrollLeft));
var y= epageY || (eclientY +
(documentdocumentElementscrollTop
|| documentbodyscrollTop));
return {'x':x,'y':y};
}
windowonload = function(){
getCoordInDocumentExample();
};
</script>
<div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #0066cc;">
请在此移动鼠标。
</div>
<br />
<div id="coord" style="width:500px;border:2px solid #336699;"> </div>
以上就是关于如何在javascript中获取鼠标的位置坐标，然后再在body里面做一个文本框获取全部的内容，包括:如何在javascript中获取鼠标的位置坐标，然后再在body里面做一个文本框获取、JS获取鼠标点击位置坐标、html怎么取得鼠标点击容器的时候相对容器的位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）