javascript 鼠标定位

最新推荐文章于 2024-06-15 19:18:00 发布
原创 最新推荐文章于 2024-06-15 19:18:00 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

本文介绍了一种获取鼠标在页面上绝对位置的方法，适用于多种浏览器环境。通过检测`pageX`和`pageY`属性，或者结合`clientX`, `clientY`, `scrollLeft`, `scrollTop`等属性来实现跨浏览器兼容的鼠标位置获取。

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

//鼠标的绝对定位
function mousePosition(ev){
if(!ev) ev=window.event;
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.documentElement.scrollTop  - document.body.clientTop
    };
}
通过JS 获取Mouse Position(鼠标坐标)的代码
12-11
昨天写的脚本在获取鼠标位置的时候有些问题。在IE中始终当有滚动条的时候，发现document.body.scrollTop并没有起到作用。后来在google中搜索到一篇文章Mouse Cursor Position，详细介绍了浏览器鼠标定位的问题。各个浏览器对鼠标定位的标准不一样，就连不通版本的ie对定位支持都不一样。document.body.scrollLeft，document.body.scrollTop只用于IE6以前的版本，在IE6中，对没有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE，那么IE6将使用document.documentElement.
js-鼠标事件-定位
weixin_30323961的博客
11-20 139
1. 通过触发某事件，该事件相对document左上角的位置： BasicUtils.event.getPosition = function(e) { e = e || window.event; var pos = {}; if(typeof e.pageX !== "undefined") { return {x: e.pageX, y:...
js 鼠标位置
weixin_30659829的博客
07-11 533
1、clientX、clientY 光标位置——>距离当前body可视区域的x，y坐标 2、pageX、pageY 光标位置——> 对于整个页面来说，包括了被卷去的body部分的长度 3、screenX、screenY 光标位置——>点击位置距离当前电脑屏幕的x，y坐标 4、offsetX、offsetY 光标位置——> 相对于带有定位的父盒子的...
JavaScript鼠标定位
04-10
JavaScript鼠标定位是Web开发中的一个基础但至关重要的概念，它涉及到事件处理、DOM操作以及坐标系统等多个方面。在网页交互中，用户与页面的互动往往离不开鼠标的移动和点击，因此，理解并掌握鼠标定位技术对于提升...
firefox中用javascript实现鼠标位置的定位
10-30
在JavaScript中，获取鼠标位置是常见的需求，尤其是在开发交互式网页或者需要响应用户鼠标操作的场景下。在Firefox浏览器中，我们同样可以使用JavaScript来实现这一功能。本篇将详细探讨如何在Firefox中通过...
javascript 鼠标拖动图标技术
10-29
JavaScript中的鼠标拖动图标技术是一种常见的交互设计，它允许用户通过鼠标操作页面上的元素，如图片、形状或自定义对象，使它们跟随鼠标移动。在网页设计和开发中，这种功能可以用于创建可自定义布局的界面、拖放...
JavaScript简单实现鼠标移动切换图片的方法
10-22
- 错误与调试技巧总结：介绍了在JavaScript程序开发中如何定位和处理错误，使用调试工具和技巧。 - 数据结构与算法技巧总结：探讨了在JavaScript中实现和应用各种数据结构与算法，如数组、栈、队列、排序算法等。 - ...
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
10-21
JavaScript鼠标事件是网页交互中的重要组成部分，它们允许开发者在用户与网页进行交互时执行特定的操作。在这个简单实例中，我们将探讨如何利用JavaScript处理鼠标右键点击，并弹出一个div元素作为自定义菜单。 ...
JS：获取鼠标点击位置
最新发布
qq_45820271的博客
06-15 1554
使用JS获取鼠标的点击位置：在目标元素的点击位置，在页面中的点击位置，在视口中的点击位置
JQuery、Js获取元素、鼠标位置
jimoandgudu的博客
02-28 2756
单机某个元素弹出窗口有时需要动态的获取元素的位置 例如： 例如图片中的弹框，如果红色单词向右移动，弹窗会显示不完整 JQuery 获得绝对,相对位置的坐标方法 //获取页面某一元素的绝对X,Y坐标 var X = $('#ID').offset().top; var Y = $('#ID').offset().left; //获取相对(父元素)位置: var X = $('#ID')....
在js中如何获得鼠标位置（带图理解）
tjq11111的博客
11-02 2381
1.pageX,pageY 个人理解：此时鼠标的位置表示鼠标在整个body或html中的位置。 使用方法：其中fn为自定义函数名称 ，onclick=“fn（event）"为点击body元素是触发的事件 2.clientX,clienY 用法同上图一样，只需要将pageX,Y替换为clientX,Y 个人理解：此时鼠标的位置表示，你现在能看到的body或html内容部分的位置 3.screenX,Y 用法同上 个人理解：此时鼠标位置表示，鼠标距离浏览器的位置 ...
一张图看懂js的鼠标位置
学者的博客
03-09 272
别外还有x、layerX。 不浏览器含义不一样。在chrome中，x等于clientX, layerX等于clientX加上边框。
js获取精确的鼠标坐标
onedear的专栏
08-25 375
  现在很多网站分析系统均要获取鼠标坐标跟轨迹来绘制云图跟鼠标轨迹，这就 要求鼠标坐标必须要准确才行。但要准确却有一定困难。 如上图： 用户打开百度首页，在不同的浏览器大小下点击“网站”字体，的坐标完全不一致。坐标不准确，云图，热点图何来准确？ 对于普通一个网站有3个不确定性： 1.       是否固定宽度 2.       是否靠左，靠右，居...
jQuery左侧固定导航栏点击滑动对应页面
林中明月间丶
03-07 5341
<!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> <me
JavaScript移动显示
weixin_57775218的博客
05-08 512
JavaScript移动显示 1.首先创建好 html 的格式，然后！+Tab；我们要实现鼠标在div标签中移动时，下面的p标签实时显示鼠标在div的位置，首先要在body里创建div标签和p标签，分别给它们设置id名，如下图： 2.设置css样式；给前面创建的div标签和p标签设置样式，首先要把浏览器自带的内外边框样式删除掉，使用“*”通配符进行删除，分别给div标签和p标签设置好宽高背景颜色，用外边距（margin）把div标签和p标签移动到中间位置，如下图： ...
使用 javascript 将鼠标指针移动到特定位置
迹忆客
07-01 2523
没有使用 JavaScript 更改鼠标位置的直接方法，因为它有一些缺陷。但是在编程中总是有不同的和非官方的做事方式。要解决鼠标指针移动到特定位置的问题，我们必须隐藏原来的鼠标指针。然后，我们有两个创建我们的自定义鼠标指针并编写一些 JavaScript 代码使其移动到特定位置。
js 指定光标位置
weixin_35757531的博客
01-07 4440
可以使用 JavaScript 中的 selectionStart 和 selectionEnd 属性来指定光标的位置。 这些属性属于 HTMLInputElement 对象，因此你需要首先将你的输入元素转换为这种类型，然后就可以使用这些属性了。 例如： constinput = document.getElementById('myInput'); input.selectionStart = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值