js如何获取鼠标在某元素移动时~鼠标指针在元素中的坐标？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何获取鼠标在某元素移动时~鼠标指针在元素中的坐标？相关的知识，希望对你有一定的参考价值。
比如我的页面中有一个img元素~
当鼠标在这个图片元素中移动时，我如何用js或者jquery获得鼠标相对这个元素左上角的X和Y坐标值？
稍等上代码！！
<html><head>
<script type="text/javascript">
function show_coords(event)
var x = event.clientX;
var y = event.clientY;
var say = document.all("coords");
say.innerHTML = "X:"+x+" Y:"+y;
say.style.position = "absolute";
say.style.left = x + 30;
say.style.top = y;
</script>
</head>
<body onmousemove="show_coords(event)">
<p id="coords"></p>
</body>
<html>
希望我的回答对你有用，有用就采纳！！！谢谢！
追问那个~你直接用clientX和clientY，这里得到的是鼠标相对整个页面的坐标吧~我想知道如何才能得到相对于鼠标某元素的坐标~
追答额。。那需要再获取一下该元素相对于页面的坐标，然后把两个值相减就可以了！！
<head>
<style>
</style>
<script type="text/javascript">
var left,top;
window.onload= function ()
var image = document.getElementById('img');
top1 = parseInt(image.style.top);
console.log(top1)
left = image.style.left;
console.log(left)
function show_coords(event)
var x = event.clientX-parseInt(left);
var y = event.clientY-parseInt(top1);
var say = document.all("coords");
say.innerHTML = "X:"+x+" Y:"+y;
say.style.position = "absolute";
say.style.left = x + 30;
say.style.top = y;
</script>
</head>
<body >
<img id="img" src="/6rooms/html/img/1.jpg" alt="" onmousemove="show_coords(event)" style="position: absolute;
top:50px; left: 200px;">
<p id="coords"></p>
</body>
<html>
看一下代码！！！
你这里取的是当前元素的style属性~
而这个元素外面还嵌套着其他元素~也有元素的margin值是0 auto这种的~直接用style取不到元素相对于页面的位置~
那就用jquery来写，有方法可以直接取到。
上面那个方法不是能取到元素相对于页面的坐标吗？
你的代码是能取到~如果你把这个元素外层再多嵌套几层呢？
jquery怎么取？我知道jquery能用.offset()取到相对窗口的坐标~但这个坐标和event里面的clientXY坐标不配套~没法进行运算~
怎么没法运算~~~
<script src="/6rooms/html/js/jquery.js"></script><script>
var coords2 = $('#coords2');
$('#img2').mousemove(function()
coords2.css('display', '');
var x = event.clientX - $(this).offset().left;
var y = event.clientY - $(this).offset().top;
var text = "X:"+x+" Y:"+y;
coords2.offset( top: event.clientY, left: event.clientX+30 );
coords2.text(text);
).mouseout(function(event)
/* Act on the event */
coords2.css('display', 'none');
);;
</script>
体力活大哥！！！！！
解决了吗
参考技术A代码如下：
<!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]
参考技术B 我们有代码：<!DOCTYPE html>
<html>
<head>
<script>
function coordinates(event)
document.getElementById("demo").innerHTML = "X = " + event.clientX + " Y = " +
event.clientX;
</script>
<style>
.divwidth: 600px; height: 300px; border: blue 1px solid;
.infoborder: tomato 2px solid;
</style>
</head>
<body>
<div onmousemove="coordinates(event)" class="div"></div>
<p>单击上面的图片可显示鼠标指针相对于屏幕的 x 和 y 坐标。</p>
<div id="demo" class="info"></div>
</body>
</html> 参考技术C <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*margin: 0;padding: 0;list-style: none;
.mainheight: 500px;width: 500px;background: #cecece;margin: 20px auto;
</style>
<body>
<div class='main'></div>
</body>
<script>
var main=document.getElementsByTagName('div')[0];
function init()
main.addEventListener('mousemove',move,false)
init();
function move(e)
//var e=event || window.event;
var x=e.clientX-main.offsetLeft;
var y=e.clientY-main.offsetTop;
console.log(x+','+y)
</script>
</html>
以上是关于js如何获取鼠标在某元素移动时~鼠标指针在元素中的坐标？的主要内容，如果未能解决你的问题，请参考以下文章