获取鼠标坐标的js，来源http://www.cnblogs.com/5201314/archive/2009/05/21/1486034.html
兼容火狐，ie，chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
</head>
<body>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>
如果以上还不够，那么试试这个，需要jquery支持
<%@ page language="java" pageEncoding="utf-8"%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'hightlight.jsp' starting page</title>
<style type="text/css">
.highlight {background-color: #FFFF88; }
</style>
<script type="text/javascript">
function chHere(mouseOverId){
var X = $("#"+mouseOverId).offset().top;
var Y = $("#"+mouseOverId).offset().left;
alert(X+":"+Y);
}
</script>
</head>
<body>
<span id="mySpan" onclick="chHere('mySpan')" style="margin-left:50px;">这里</span>
</body>
</html>
分享到：
相关推荐
### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标，并实时显示这些坐标值。该功能主要涉及到以下几个知识点： 1. **事件监听器...
在计算机编程领域，获取当前鼠标的位置是一项常见的任务，特别是在开发涉及用户交互的软件时，比如游戏、绘图软件或者任何需要精确控制鼠标动作的应用。这个功能通常通过编程语言中的特定库或API来实现，以便获取...
在计算机编程领域，获取鼠标位置的颜色值是一项常见的需求，特别是在图形用户界面（GUI）开发或者图像处理相关的项目中。这个基于VC（Visual C++）环境的程序源码提供了一个实用的功能，即实时获取鼠标指针所在位置...
在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....
以下是使用JavaScript实现获取鼠标当前位置的方法的详细知识点。 首先，我们需要了解三种鼠标坐标系统：客户区坐标、页面坐标和屏幕坐标。 1. 客户区坐标（clientX, clientY） 客户区坐标是指鼠标指针相对于浏览器...
1. **定义**：`event.clientX` 和 `event.clientY` 是 JavaScript 事件对象中的属性，用于获取鼠标点击位置相对于视口（即浏览器窗口）的横纵坐标。 2. **局限性**：虽然这两个属性能够提供基本的位置信息，但它们...
在第二个示例中，我们使用 CSS 和 JavaScript 实现了鼠标位置的获取在区块内。在这个示例中，我们使用 `onmousemove` 事件来捕捉鼠标的移动，并通过 `getMousePos` 函数来获取鼠标的坐标。然后，我们使用 `document....
获取鼠标的坐标，通过js任意获取鼠标点击处的位置坐标。
而在JavaScript中，可以使用`event.clientX`和`event.clientY`属性来获取鼠标位置，如下： ```javascript function OnMouseClick(event) { var x = event.clientX; var y = event.clientY; alert("鼠标位置: " +...
canvas例子，如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行，F12可查看源代码。
在浏览器环境中，JavaScript可以访问`event`对象，它包含了与用户交互相关的各种信息，包括鼠标的当前位置。当用户在页面上移动鼠标时，可以监听`mousemove`事件来获取鼠标的坐标。以下是一个简单的实现： ```...
在JavaScript编程中，"js 鼠标位置 div拖拽"是一个常见的交互功能，它允许用户通过鼠标操作页面上的div元素并改变其位置。这个功能的实现涉及到几个关键知识点，包括鼠标事件、鼠标的坐标属性以及div元素的样式操作...
事件对象 Event 提供了多个属性来获取鼠标的当前位置和元素的大小等信息。其中包括： 1. clientX 和 clientY：获取鼠标相对于窗口的横、纵坐标。例如，如果鼠标处于页面的正中间，那么 clientX 等于 200，clientY ...
通过上述方法，我们可以有效地获取鼠标在页面上的位置，即使页面存在滚动条也能准确无误地捕捉到鼠标的当前位置。这对于提升用户体验、增加网页互动性等方面具有重要意义。开发者可以根据自己的需求调整代码细节，...
在Web开发中，JavaScript提供了`event.clientX`和`event.clientY`属性，可以在鼠标事件处理函数中获取到鼠标的当前位置。以下是一个HTML页面上的JavaScript示例： ```html <!DOCTYPE html> ('Mouse position:', ...
在JavaScript中，获取鼠标当前的位置是常见的需求，尤其是在实现交互式网页应用时。本文将详细解释如何使用JavaScript来实现这一功能，主要涉及三个坐标系统：客户区坐标、页面坐标和屏幕坐标。 1. 客户区坐标...
在Web开发中，JavaScript提供了`event.clientX`和`event.clientY`属性，可以在`mousemove`事件中获取鼠标位置。对于现代浏览器，还可以利用`navigator.getGamepads()`来获取游戏手柄的精确位置，这对于一些需要精确...
本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标，包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作，提供了强大的选择器和事件处理...
在本文中，我们将深入探讨如何使用Flex技术来实现在网页中通过鼠标滚动来实现图片的放大缩小，并且确保每次缩放都是以鼠标当前位置为中心进行的。Flex是一种强大的前端开发框架，它允许开发者创建灵活的、响应式的...
本教程将深入探讨如何利用SuperMap iClient 6R for JavaScript库来实现一个功能，即当鼠标移动到地图上时，实时显示当前鼠标的地理坐标。SuperMap是一款强大的GIS软件，其iClient系列为开发者提供了丰富的JavaScript...