用 javascript 获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,本文详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Javascript:
<script type="text/javascript">
// 说明:获取鼠标位置
// 整理:http://www.codebit.cn
// 来源:http://www.webreference.com
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
};
}
</script>
上面的代码我们在 怎么用 javascript 实现拖拽 中已经介绍过了,由于这个需求我们经常用到,所以我们将这段代码独立成一篇文章,供新手查询。
使用方式:
Code:
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
}
关于代码的详细说明,原文中已经介绍,现转到此处:
我们首先要声明一个 evnet 对象,无论移动、点击、按键等,都会激活一个 evnet ,在 Internet Explorer 里, event 是全局变量,会被存储在 window.event 里. 在 firefox 或者其他浏览器,event 会被相应的函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove 会获取鼠标移动事件。
为了让 ev 在所有浏览器下获取了 event 事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值。在 MSIE 中 ev 为空,所以得到 window.event 。
因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个 mousePosition 函数,它包含一个参数 : event 。
因为我们要在 MSIE 和其他浏览器下运行,Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置,如果你有一个 500*500 的窗口并且你的鼠标在绝对中间,那么 pageX 和 pageY 的值都是 250,如果你向下滚动 500, 那么 pageY 将变成 750。
MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY 依然是 250,因此,我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后,MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在 document.body.clientLeft 和 clientTop 中,我们也把这些加进去。
很幸运,我们现在已经用 mousePosition 函数解决了坐标问题,不需为此费心了。
分享到:
相关推荐
在本文中,我们将探讨如何使用 JavaScript 获取鼠标在页面上的位置以及触发事件的对象。 首先,让我们关注如何获取鼠标的位置。JavaScript 提供了 `event` 对象来处理各种用户事件,包括鼠标移动。在以下的代码片段...
在“Canvas跟随鼠标光标动画特效”中,关键知识点是利用`onmousemove`事件监听鼠标的移动,获取鼠标的位置坐标。例如,可以定义一个函数来处理这个事件: ```javascript canvas.addEventListener('mousemove', ...
现在,我们来看一下如何编写一个简单的JavaScript函数来获取鼠标光标的像素坐标: ```html <script type="text/javascript"> function showPosition(e){ var x, y; var e = e || window.event; // 兼容IE和其他...
jQuery提供`mousemove`事件,当鼠标在页面上移动时触发。通过绑定这个事件,我们可以获取到鼠标的实时位置,并据此更新光标的样式或行为。例如: ```javascript $(document).mousemove(function(event) { var x = ...
下面是一个使用JavaScript获取输入框中光标的位置的代码: ```javascript function GetCursorPsn(txb) { var slct = document.selection; var rng = slct.createRange(); txb.select(); rng.setEndPoint(...
我们需要监听鼠标的`mousemove`事件,当鼠标移动时,获取鼠标的当前位置,并根据这个位置更新心形线条的路径。这通常涉及到数学和几何知识,包括计算心形的坐标点,可能使用到圆的方程、心形的特殊公式或者其他几何...
用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,这里...
3. **坐标计算**:当`mousemove`事件触发时,我们可以从事件对象中获取鼠标的页面坐标(`event.clientX`和`event.clientY`)。接着,我们需要根据这些坐标更新十字架元素的CSS位置属性(如`left`和`top`),使其始终...
通过获取鼠标的坐标,然后用JavaScript更新元素的位置,可以实现这一效果。 3. **鼠标点击(Click)特效**:点击鼠标时,可以执行一系列操作,如展开/关闭菜单、播放/暂停视频等。通过`addEventListener('click', ...
本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法。分享给大家供大家参考,具体如下: 先来看看运行效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <...
4. **事件监听**:使用JavaScript的`addEventListener`方法监听鼠标的`mousemove`事件,获取鼠标的当前位置。 5. **动画原理**:通过不断地重绘Canvas来实现动画效果。每次`mousemove`事件触发时,更新花环的位置和...
在网页设计和开发中,有时候我们需要实现这样的功能:当页面加载完成后,自动将光标定位到特定的文本框,并选中文本框内的全部文字。这个功能常见于表单填写、搜索框或者任何需要用户快速输入的场景,可以提高用户...
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...
例如,使用`$(document).ready()`来确保在页面加载完成后执行某些代码,或者用`$("#star-canvas").on('click', function() {...})`来监听用户点击Canvas的行为。 至于`jquery特效`,可能在`js`文件中结合了jQuery的...
在本文中,我们主要探讨使用JavaScript来实现记录光标位置的方法,并会涉及到鼠标事件和页面元素操作的技巧。 首先,我们来了解一下基本概念。在HTML中,文本输入元素,例如`<textarea>`和`<input type="text">`,...
标题中的“眼珠随页面光标而在眼眶范围内滚动”是一种独特的网页动态效果,它模拟了眼球跟随鼠标光标在视窗范围内移动的情景。这种效果通常由JavaScript(JS)编程实现,为网页增添趣味性和互动性。接下来,我们将...
这个压缩包中的"html5 canvas实现的跟随鼠标光标动画特效源码.zip"很可能包含了一个示例项目,展示了如何使用HTML5 Canvas来制作一个动态的、追随鼠标光标的视觉效果。 在HTML5 Canvas中,我们可以使用`<canvas>`...
当鼠标在画布上移动时,这个事件会被触发,我们可以获取到鼠标的当前位置(`event.clientX`和`event.clientY`)。然后,根据鼠标的坐标,调整心形光标的中心位置,使其始终跟随鼠标移动。 在实现动画特效时,我们...