刚在网上搜了一个计算鼠标坐标的方法,记下来。
function getMousePoint(ev) {
// 定义鼠标在视窗中的位置
var point = {
x:0,
y:0
};
// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
if(typeof window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if(typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientX;
point.y += ev.clientY;
// 返回鼠标在视窗中的位置
return point;
}
http://www.neoease.com/get-cursor-position-with-javascript/
分享到:
相关推荐
JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...
否则,通过`clientX`和`clientY`结合页面滚动距离来计算鼠标坐标,以确保在没有`pageX`和`pageY`支持的旧版浏览器中也能正常工作。 ### 注意事项 1. **浏览器兼容性**:虽然现代浏览器普遍支持`pageX`和`pageY`,...
描述中提到"自己制作控件实现网页获取窗体外鼠标坐标",这可能是指在全屏模式下,通过JavaScript或者其他前端技术来监听鼠标移动事件,并计算出即使鼠标离开当前窗口,也能获取到其在屏幕上的绝对位置。"这只是个...
在Windows操作系统中,可以通过一些内置或第三方工具实现鼠标坐标的显示。例如,`mousexy.exe`可能就是一个这样的程序,它可以实时地在屏幕的某个角落或者状态栏显示鼠标的位置。用户运行这个程序后,无需其他操作,...
### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标,并实时显示这些坐标值。该功能主要涉及到以下几个知识点: 1. **事件监听器...
3. 使用`Item`的坐标信息,计算关键字在页面上的准确位置。 4. 可能还包括进一步的处理,比如高亮显示关键字,或者基于坐标进行其他形式的交互。 此项目可能涉及到的技术还包括: - Promise和async/await,用于异步...
3. **坐标计算**:当`mousemove`事件触发时,我们可以从事件对象中获取鼠标的页面坐标(`event.clientX`和`event.clientY`)。接着,我们需要根据这些坐标更新十字架元素的CSS位置属性(如`left`和`top`),使其始终...
在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....
在3D图形编程中,Three.js是一个非常流行的JavaScript库,用于在Web浏览器中创建和展示三维模型和场景。本教程将深入探讨如何在Three.js环境中将3D坐标转换为2D(平面)坐标,以便在网页上的div元素或其他2D元素上...
开发者会使用到DirectX或OpenGL等图形库,这些库提供了获取鼠标坐标的方法,如OpenGL的`glutMouseFunc`或DirectX的`SetCursorPos`函数。同时,游戏引擎如Unity、Unreal Engine也内置了对鼠标坐标的处理,允许开发者...
- **showMapXYonStatus(event)**: 鼠标移动事件处理器,计算并显示鼠标当前位置的坐标值。 - **calculateX(screenX, screenWidth)** 和 **calculateY(screenY, screenHeight)**: 计算屏幕坐标到地图坐标的转换。 ##...
2. **鼠标坐标获取**: 当鼠标在屏幕上移动时,系统会生成包含当前鼠标位置信息的事件对象。在JavaScript中,我们可以从`event`对象的`clientX`和`clientY`属性中获取到相对于浏览器窗口的坐标;如果是在HTML5的...
在这个例子中,当鼠标在ID为`demo`的`div`元素内移动时,我们将实时更新元素的内容以显示当前的鼠标坐标。同时,我们还使用`console.log`在浏览器控制台输出坐标信息,方便开发者调试。 需要注意的是,`event....
4. **计算选区坐标**:当用户释放鼠标时,可以通过比较`mousedown`和`mouseup`时的坐标来计算选区的起点和终点,从而得到选区的宽高和中心点。 5. **图像比例**:如果图片不是原始尺寸显示,我们需要考虑图像的CSS...
在Web开发中,特别是在JavaScript编程中,获取鼠标坐标是一项常见的需求,用于实现各种交互效果,如拖放功能、点击位置分析等。在不同的浏览器中,实现这一功能的方法可能有所不同,因此需要进行兼容性处理。以下是...
这需要计算鼠标坐标与元素坐标的相对关系: ```javascript function handleMouseMove(event) { let x = event.clientX; let y = event.clientY; let areaRect = area.getBoundingClientRect(); let isInside ...
这个需求可以通过JavaScript实现,具体来说,就是获取光标(鼠标指针)的像素坐标。在百度统计中的热点图就是一个典型的例子,它通过记录用户在页面上的鼠标移动来收集数据,进而生成用户行为的热点区域。 要实现这...
在网页中实现“显示鼠标坐标”这一经典特效,是JavaScript基础功能的一个实际应用,它可以帮助开发者更好地理解事件监听、DOM操作以及浏览器API的使用。 首先,我们需要了解JavaScript中的事件。在本例中,我们关注...
在讨论JavaScript如何获取鼠标坐标位置时,首先应当了解鼠标事件对象中包含的坐标信息。鼠标事件对象在不同的浏览器中可能略有不同,但主要属性通常包括:clientX、clientY、pageX、pageY、screenX、screenY等。...
在JavaScript(简称JS)编程中,实现鼠标拉框截图是一项常见的功能,特别是在Web应用中,如在线编辑器、协作工具等。这个功能的核心是通过监听鼠标事件,结合HTML5的Canvas API来完成图像的选择和捕获。以下是实现这...