代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标在Canvas中的坐标位置</title>
<style>
#canvas{
border:1px solid #ccc
width:300px
height:300px
overflow:hidden
}
</style>
<script>
function get_canvas(ev,obj){
m_clientX = ev.clientX-obj.offsetLeft
m_clientY = ev.clientY-obj.offsetTop
document.getElementById("tips").innerHTML = "当前坐标:X:"+ m_clientX + " ,Y:" +m_clientY
}
</script>
</head>
<body>
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
</body>
</html>
兼容IE8+
用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同。
参考资料
首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解.脚本之家[引用时间2018-1-18]