JavaScript获得鼠标绝对位置

最新推荐文章于 2025-12-30 12:48:39 发布
原创 最新推荐文章于 2025-12-30 12:48:39 发布 · 127 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文介绍了一种利用JavaScript获取鼠标绝对位置并显示在网页上的方法，同时实现了获取指定控件的绝对位置功能，包括X轴和Y轴坐标，并通过实例演示了如何将这些功能应用到实际网页中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body onmouseMove="getXY(event)">
<script language="JavaScript">
<!--
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}

function getXY(event)
{
    var e = event || window.event;
    var x = mouseX(e);
    var y = mouseY(e);
    document.getElementById("XY").innerHTML = "X:" + x + "<br />Y:" + y;
}


function getX(elementID)
{
        var el = elementID
        return el.offsetLeft
   
}
   
function getY(elementID)
{
        var el = elementID
        return el.offsetTop
   
}

function getElementPositionX(elemID)
{
   var offsetTrail = document.getElementById(elemID);
   var offsetLeft = 0;

   while(offsetTrail)
   {
      offsetLeft += offsetTrail.offsetLeft;
      offsetTrail = offsetTrail.offsetParent;
   }

    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof(document.body.leftMargin) != "undefined") {
        offsetLeft += document.body.leftMargin;
    }
   
    return offsetLeft;
}

function getElementPositionY(elemID)
{
   var offsetTrail = document.getElementById(elemID);
   var offsetTop = 0;

   while(offsetTrail)
   {
      offsetTop += offsetTrail.offsetTop;
      offsetTrail = offsetTrail.offsetParent;
   }

    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof(document.body.leftMargin) != "undefined") {
        offsetTop += document.body.topMargin;
    }
    return offsetTop;
}
function getElementPositionXY(elemID)
{
   var offsetTrail = elemID;
   var offsetLeft = 24;
   var offsetTop =0;

   while(offsetTrail)
   {
      offsetLeft += offsetTrail.offsetLeft;
      offsetTop += offsetTrail.offsetTop;
      offsetTrail = offsetTrail.offsetParent;
   }

    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof(document.body.leftMargin) != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetLeft += document.body.leftMargin;
    }
   document.getElementById("txt_left").innerText = offsetLeft;
   document.getElementById("txt_top").innerText = offsetTop;
    document.getElementById("divMsg").style.top = offsetTop + "px";
}

//-->
</script>
鼠标的绝对位置：<br />
<span id="XY" style="color:red;"></span><br /><br />
控件输入框txtPos的绝对位置：<br />
X：<span id="txt_left" style="color:red;"></span><br />
Y：<span id="txt_top" style="color:red;"></span><br />
<input type="text" name="txtPos" id="txtPos" onfocus="getElementPositionXY(this)"/>
<br /><br />
<div id="divMsg" style="height:60px;width:100px;background-color:#cccccc"></div>
</body>
</html>

鼠标单击时jq特效
qq_33543447的博客
10-09 976
type="text/javascript">   /* 鼠标特效 */   var a_idx = 0;   jQuery(document).ready(function($) {   $("body").click(function(e) {   var a = new Array("富强", "民主", "文明", "和谐", "
得到对象以及鼠标在页面的绝对位置
qiaoyuetian博客访谈
11-05 585
获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边 距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位 置。如下：// get absolute Left position//建立者:jiarry@hotmail.com
html获取鼠标绝对坐标,JavaScript获取网页元素的绝对坐标
weixin_39851977的博客
06-05 160
function findPosX(obj) {var curleft = 0;if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回bodywhile (obj.offsetParent) {//遍历所有父类元素curleft += obj.offsetLeft;//当前元素的左边距obj = obj.offsetParent;}} else if ...
(三种方式)JavaScript获取鼠标“位置”的方法
weixin_42244691的博客
12-09 1242
参考 Document-Pos 1. 相对于屏幕 function getPos(event) { var e = event || window.event; console.log("相对于屏幕的绝对路径：", e.screenX, e.screenY); } 2. 相对于浏览器 function getPos(event) { var ...
html5 js获取鼠标坐标,JavaScript取得鼠标绝对位置程序代码介绍
weixin_28683165的博客
06-02 506
首先不同浏览器中event位置属性的分析:1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)4. IE的event.offsetX,event.o...
javascript获得鼠标的绝对位置
guoguo1980的专栏
09-17 1598
New Document function mouseX(evt) {if (evt.pageX) return evt.pageX;else if (evt.clientX)   return evt.clientX + (document.documentElement.scrollLeft ?   document.d
JQ获取鼠标的位置
乐逍遥
05-25 1005
<div class="mouse-cords"></div> // 获取鼠标位置 $(function () { $("body").mousemove(function (event) { var relPageCoords = "(" + event.pageX + "," + event.pageY + ")"; $(".mouse-cords").text(relPageCoord...
JavaScript中鼠标位置属性的全面解析与应用
weixin_36296444的博客
09-18 1213
本文还有配套的精品资源，点击获取 简介：在JavaScript中，处理鼠标事件时，涉及多个与位置相关的属性，包括x, y, offsetX, offsetY, clientX, screenX, pageX, clientY, screenY和pageY。这些属性提供了鼠标在不同上下文中的位置信息，理解它们的区别对于实现精确的页面交互至关重要。本文详细解析了每个属性的含义，...
JavaScript 获取鼠标点击位置坐标
idwenwen的博客
04-25 742
转载自：点击打开链接 在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容   鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单，获
javascript 获取鼠标的绝对位置 event
12-12
在JavaScript中，获取鼠标的绝对位置是常见的需求，特别是在实现交互式用户界面或者进行鼠标跟踪时。`event`对象是JavaScript中的一个内置对象，它包含了有关当前事件（如鼠标点击或移动）的各种信息，其中包括鼠标...
JavaScript取得鼠标绝对位置程序代码介绍
10-27
本文将详细介绍如何在不同浏览器环境下通过JavaScript获取鼠标绝对位置的方法。 首先，我们需要了解不同浏览器对于鼠标事件对象(event object)中的位置属性的处理差异。在Internet Explorer（IE）中，`event.x` 和 ...
JavaScript获取鼠标位置和鼠标与div的相对位置
08-10
在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....
javascript DIV跟随鼠标移动
10-22
我们可以通过这个对象获取鼠标的当前位置（clientX和clientY）。然而，由于页面可能存在滚动，我们需要加上页面的滚动偏移量（scrollLeft和scrollTop）以获取元素相对于视口的精确位置。 ```javascript var div1 = ...
基于java + vue校园跑腿便利平台系统(源码+数据库+文档)
JIngJaneIL的博客
12-30 288
本文介绍了一个基于SpringBoot+Vue的校园跑腿便利平台系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细说明了系统设计原则、技术选型理由，并提供了功能演示、代码示例和测试案例。该系统旨在优化校园服务体验，通过规范化设计确保信息清晰性和操作便捷性。文末还提供了源码获取方式和最新计算机毕业设计选题推荐。
JavaScript 静态模块声明（静态分析、动态导入）
Irene1991的博客
12-29 472
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
Vue import.meta.env 讲解
Violet_YSWY的博客
12-25 431
VITE_
Vue3中v-if与v-show的本质区别及动态组件状态保持的关键策略是什么？
最新发布
https://blog.cmdragon.cn/
12-30 719
特性v-ifv-showDOM存在与否销毁/重建始终存在切换成本高（销毁重建）低（改CSS）初始渲染成本低（不满足则不渲染）高（必渲染）适用场景切换频率低（如权限控制）切换频率高（如tab切换）
vue v-for 列表渲染指令注意
KLW75
12-27 217
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。
渐进式JavaScript框架：Vue
码农的艺术
12-25 589
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。
javascript 如何获得鼠标位置？
04-27
<think>好的，我现在需要帮助用户解决如何在JavaScript中获取鼠标位置的问题。首先，我要回顾用户提供的引用资料，看看有哪些方法可以提取出来。 用户引用了五个来源，其中提到不同的坐标属性，比如clientX/Y、pageX/Y、screenX/Y，以及如何处理滚动的情况。根据引用[1]和[2]，使用clientX和clientY可以获取相对于视口的坐标，而引用[4]和[5]提到pageX/Y是相对于文档的，考虑了滚动。还有screenX/Y是相对于屏幕的绝对位置。 接下来，我需要将这些信息整理成不同的方法，方便用户理解。可能需要分步骤说明，比如基本方法、考虑滚动的方法，以及不同框架下的实现。比如，引用[1]给出了纯JavaScript的事件监听器示例，而引用[3]提到React中的处理，用户可能想知道在Vue或React中的写法。 然后，用户的问题可能不仅限于基本实现，还可能关心兼容性问题，比如如何处理IE的兼容性，引用[4]提到了scrollLeft和scrollTop的获取方式，这需要解释为什么需要这些代码。同时，引用[5]区分了三种不同的坐标类型，需要明确说明各自的区别和应用场景。 另外，用户可能需要实际应用的例子，比如拖拽功能或绘制Canvas时如何获取坐标。这时候需要结合具体场景给出代码片段，并引用相关的资料支持。 在组织回答时，应该先介绍基本方法，再逐步深入处理滚动和兼容性问题，然后分框架说明，最后举例应用场景。同时，要确保代码示例正确，并符合用户的格式要求，比如行内公式用$...$，但这里可能不需要数学公式，主要关注代码结构。 最后，生成相关问题时要考虑用户可能进一步的问题，比如不同坐标系的区别、框架中的注意事项、性能优化等。确保问题覆盖用户可能的需求，帮助他们深入理解。</think>### JavaScript获取鼠标位置的完整方法指南 #### 一、基本方法 1. **屏幕坐标系**（绝对位置） ```javascript document.addEventListener('mousemove', function(event) { console.log("屏幕坐标：", event.screenX, event.screenY); // 相对于显示器屏幕左上角 }); ``` 2. **浏览器视口坐标系** ```javascript document.addEventListener('mousemove', (e) => { console.log("视口坐标：", e.clientX, e.clientY); // 相对于浏览器可视区域左上角 }); ``` 3. **文档坐标系**（含滚动偏移） ```javascript function getDocumentPosition(e) { const scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; const scrollY = document.documentElement.scrollTop || document.body.scrollTop; return { x: e.pageX || e.clientX + scrollX, // 兼容IE y: e.pageY || e.clientY + scrollY }; } ``` #### 二、框架适配方案 1. **Vue 3实现**（组合式API） ```javascript import { onMounted, onUnmounted } from 'vue'; export default { setup() { const trackMouse = (event) => { console.log(event.clientX, event.clientY); }; onMounted(() => { window.addEventListener('mousemove', trackMouse); }); onUnmounted(() => { window.removeEventListener('mousemove', trackMouse); }); } } ``` 2. **React实现**（函数组件） ```javascript import { useEffect } from 'react'; function MouseTracker() { useEffect(() => { const handleMove = (e) => { console.log(e.clientX, e.clientY); }; window.addEventListener('mousemove', handleMove); return () => window.removeEventListener('mousemove', handleMove); }, []); return <div>追踪鼠标位置</div>; } ``` #### 三、应用场景示例 1. **拖拽功能实现** ```javascript let isDragging = false; document.addEventListener('mousedown', () => isDragging = true); document.addEventListener('mouseup', () => isDragging = false); document.addEventListener('mousemove', (e) => { if (isDragging) { console.log('拖拽坐标:', getDocumentPosition(e)); } }); ``` 2. **Canvas绘图定位** ```javascript const canvas = document.getElementById('myCanvas'); canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; // 转换为画布相对坐标 const y = e.clientY - rect.top; draw(x, y); }); ``` #### 四、注意事项 1. 使用`pageX/pageY`时注意浏览器兼容性（IE9+支持） 2. 移动端需使用`touchmove`事件配合`touches[0].clientX` 3. 高频触发事件建议添加节流函数优化性能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值