比如我的页面中有一个img元素~
当鼠标在这个图片元素中移动时,我如何用js或者jquery获得鼠标相对这个元素左上角的X和Y坐标值?
稍等上代码!!
<html>希望我的回答对你有用,有用就采纳!!!谢谢!
追问那个~你直接用clientX和clientY,这里得到的是鼠标相对整个页面的坐标吧~我想知道如何才能得到相对于鼠标某元素的坐标~
追答额。。那需要再获取一下该元素相对于页面的坐标,然后把两个值相减就可以了!!
看一下代码!!!
你这里取的是当前元素的style属性~
而这个元素外面还嵌套着其他元素~也有元素的margin值是0 auto这种的~直接用style取不到元素相对于页面的位置~
那就用jquery来写,有方法可以直接取到。
上面那个方法不是能取到元素相对于页面的坐标吗?
你的代码是能取到~如果你把这个元素外层再多嵌套几层呢?
jquery怎么取?我知道jquery能用.offset()取到相对窗口的坐标~但这个坐标和event里面的clientXY坐标不配套~没法进行运算~
怎么没法运算~~~
<script src="/6rooms/html/js/jquery.js"></script>体力活大哥!!!!!
解决了吗
代码如下:
<!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]
本回答被网友采纳