封装在windowevent这个类下，你可以去看看，另提供一份参考代码~
<html >
<head>
<title>JavaScript获取鼠标坐标</title>
<meta >
以下程序实现了在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();
}
以上就是关于jsp里面，怎么获取鼠标在网页中的坐标全部的内容，包括:jsp里面，怎么获取鼠标在网页中的坐标、js鼠标指针获取、怎么获取 canvas 上鼠标的坐标等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）