js获取鼠标所在的位置
Posted 卢噜噜噜噜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取鼠标所在的位置相关的知识，希望对你有一定的参考价值。
我这里写的代码是运用在canvas画布中的，获取鼠标位置。其实获取鼠标位置在不在canvas中道理都是相同的。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function $$(id)
return document.getElementById(id);
function getMouse(element)
var mouse = x : 0,y:0;
element.addEventListener("mousemove",function (e)
var x,y;
var e = e||window.event;
if(e.pageX||e.pageY)
x = e.pageX;/*鼠标指针的位置相对于文档的左边缘*/
y = e.pageY;/*同理，相对于文档的上边缘*/
else /*处理兼容问题*/
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
/*clientX，clientY：鼠标相对于浏览器的位置*/
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
/*scrollLeft，scrollTop：左右滚动条、上下滚动条滚动了的位置*/
x -= element.offsetLeft;
/*offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算*/
y -= element.offsetTop;
mouse.x = x;
mouse.y = y;
,false);
return mouse;
window.onload = function ()
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var txt = $$("txt");
var mouse = getMouse(cnv);
cnv.addEventListener("mousemove", function ()
txt.innerHTML = "鼠标当前坐标为：（" + mouse.x + "," + mouse.y + "）";
, false);
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
<p id="txt">鼠标当前坐标为：</p>
</body>
</html>
最后，IE8，chrome浏览器下是有event对象，但是firefox没有，因此就有兼容性的问题。在代码中，if中的代码就是在IE8，chrome使用event的时候的代码，else后的代码则是为了兼容这个问题的代码。
以上是关于js获取鼠标所在的位置的主要内容，如果未能解决你的问题，请参考以下文章