代码如下:
<!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]
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>1234</li>
<li>12345</li>
<li>123456</li>
<li>1234567</li>
</ul>
<script>
$('ul').on('click','li',function (e) {
console.log(e.clientX)
console.log(e.clientY)
})
</script>
</body>
</html>
你好,JS没有直接获取元素相对于页面的绝对坐标的方法。但是我们可以通过相关值的计算而得到。首先我们假设input元素ID为"J_MyInput",然后看下面代码注释:
var input = document.getElementById('J_MyInput') // 根据ID取得元素对象var sizeObj = input.getBoundingClientRect() // 取得元素距离窗口的绝对位置
// 窗口的滚动偏移(垂直、水平)
var bodyOffset = {top: document.body.scrollTop, left: document.body.scrollLeft}
// 元素相对于页面的绝对位置 = 窗口滚动偏移 + 元素相对于窗口的绝对位置
var inputOffsetTop = sizeObj.top + bodyOffset.top // 距顶部
var inputOffsetLeft = sizeObj.left + bodyOffset.left // 距左侧
希望能解决你的问题,有疑问可追问,望采纳~