js如何获取鼠标在某元素移动时~鼠标指针在元素中的坐标？
当鼠标在这个图片元素中移动时，我如何用js或者jquery获得鼠标相对这个元素左上角的X和Y坐标值？
最新回答
人不行不怪路不平
2024-05-02 01:37:19
稍等上代码！！
<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，这里得到的是鼠标相对整个页面的坐标吧~我想知道如何才能得到相对于鼠标某元素的坐标~
追答
额。。那需要再获取一下该元素相对于页面的坐标，然后把两个值相减就可以了！！
<html>
<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>
体力活大哥！！！！！
解决了吗
二到无穷大
2024-05-02 08:48:53
代码如下：
<!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]
没纸就用手抠
2024-05-02 12:08:00
<!DOCTYPE html>
<html>
<head>
<script>
function coordinates(event) {
document.getElementById("demo").innerHTML = "X = " + event.clientX + " Y = " +
event.clientX;
}
</script>
<style>
.div{width: 600px; height: 300px; border: blue 1px solid;}
.info{border: 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>
陌生De自我ヾ忘却
2024-05-02 07:34:54
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{margin: 0;padding: 0;list-style: none;}
.main{height: 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>
热门标签
