JavaScript获得鼠标绝对位置

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量83 收藏
点赞数
分类专栏： Javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangleide414/article/details/84288283
版权

<!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" οnfοcus="getElementPositionXY(this)"/>
<br /><br />
<div id="divMsg" style="height:60px;width:100px;background-color:#cccccc"></div>
</body>
</html>

wangleide414
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标单击时jq特效
qq_33543447的博客
10-09 877
type="text/javascript">   /* 鼠标特效 */   var a_idx = 0;   jQuery(document).ready(function($) {   $("body").click(function(e) {   var a = new Array("富强", "民主", "文明", "和谐", "
javascript 获取鼠标的绝对位置 event
10-29
javascript 获取鼠标的绝对位置 event
html获取鼠标绝对坐标,JavaScript获取网页元素的绝对坐标
weixin_39851977的博客
06-05 102
function findPosX(obj) {var curleft = 0;if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回bodywhile (obj.offsetParent) {//遍历所有父类元素curleft += obj.offsetLeft;//当前元素的左边距obj = obj.offsetParent;}} else if ...
得到对象以及鼠标在页面的绝对位置
qiaoyuetian博客访谈
11-05 534
获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边 距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位 置。如下：// get absolute Left position//建立者:[email protected]
(三种方式)JavaScript获取鼠标“位置”的方法
weixin_42244691的博客
12-09 713
参考 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 389
首先不同浏览器中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...
JQ获取鼠标的位置
乐逍遥
05-25 841
<div class="mouse-cords"></div> // 获取鼠标位置 $(function () { $("body").mousemove(function (event) { var relPageCoords = "(" + event.pageX + "," + event.pageY + ")"; $(".mouse-cords").text(relPageCoord...
javascript获得鼠标的绝对位置
guoguo1980的专栏
09-17 1533
New Document function mouseX(evt) {if (evt.pageX) return evt.pageX;else if (evt.clientX)   return evt.clientX + (document.documentElement.scrollLeft ?   document.d
JavaScript 获取鼠标点击位置坐标
idwenwen的博客
04-25 632
转载自：点击打开链接 在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容   鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单，获
[JavaScript]获取鼠标点击区域的相对、绝对位置坐标
热门推荐
Konaji
07-07 1万+
[JavaScript]获取鼠标点击区域的相对、绝对位置坐标
JavaScript取得鼠标绝对位置程序代码介绍
10-27
介绍了关于JavaScript在不同浏览器下取得鼠标绝对位置相关函数用法及兼容性介绍，有需要的同学可参考一下
【JavaScript源代码】javascript实现跟随鼠标移动的图片.docx
12-29
　本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码，供大家参考，具体内容如下　实现思路　1、给 document 绑定 mousemove 事件，获取鼠标的坐标：e.pageX ，e.pageY 2、将图片设置成绝对定位：...
程序天下:JavaScript实例自学手册
07-08
2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
一个div里面有多个机柜，实现以鼠标当前位置为原点缩放
05-19
1. 获取鼠标当前位置相对于div的坐标，可以使用event.clientX和event.clientY获取鼠标的绝对位置，再减去div的左上角的坐标，即可得到相对于div的坐标。 2. 根据缩放比例计算出新的机柜大小。假设当前机柜大小为w和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值