获取鼠标在图片对象上的位置

最新推荐文章于 2020-07-06 15:49:07 发布

原创最新推荐文章于 2020-07-06 15:49:07 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #HTML #ViewUI

我的笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的鼠标位置追踪功能。通过自定义函数getMousePosition获取鼠标坐标，并利用jQuery的mousemove事件实时更新显示在页面上的输入框中。此示例展示了如何结合原生JavaScript与jQuery处理鼠标事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getMousePosition(e){
var x = 0, y = 0;
var e = e || window.event;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { 'x': x, 'y': y };
}

$(document).ready(function(){
$('#mouse_test').mousemove(function(e){
pos = getMousePosition(e);
var mouseX = pos.x;
var mouseY = pos.y;
$('#x').attr("value",mouseX);
$('#y').attr("value",mouseY);

});
});
</script>
</head>
<body>
<input type="text" id="x" />
<input type="text" id="y" />
<img src="test.jpg" id="mouse_test" align="left">
</body>
</html>