由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码,思路都一样,就是风格不同。
第一段代码是利用全局变量来获取实时鼠标的位置。
var xPos; var yPos; window.document.onmousemove(function(evt){ evt=evt || window.event; if(evt.pageX){ xPos=evt.pageX; yPos=evt.pageY; } else { xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft; yPos=evt.clientY+document.body.scrollTop-document.body.clientTop; } });
因为IE和Firefox对clientX的解析不一样,IE认为clientX是鼠标相对整个页面左上角的位置,而Firefox认为是相对当前所见页面左上角的位置。而这段代码最终返回的结果是整个页面左上角的位置。这段代码的缺陷是,xPos和yPos是实时变动的。
第二段代码是通过函数获取当前时刻的鼠标坐标值
document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mouseCoords(ev); } function mouseCoords(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 }; }
这段代码的来源是这里,这个网站还提供了一些简单的样例给我们玩耍。这个函数和刚才的函数理论是一致的,先触发mousemove事件,然后获取了事件之后,分别判断浏览器类型。这段代码的优点是,不适用全局变量,并且可以随用随拿,只要调用这个函数,就能够获取鼠标坐标。
这两段代码,个人偏好于后者,现在先把这段代码记下来,这段代码应该是会经常被使用到的。
分享到:
相关推荐
标题“JS获取鼠标位置(兼容FF)”指的是用JavaScript实现一个能在不同浏览器,特别是Internet Explorer 6.0和Firefox 3.0.1上运行的鼠标位置获取方法。Firefox的兼容性处理是关键,因为不同的浏览器有时会有不同的...
标题中的"google鼠标经过JS特效,IE/FF兼容"指的是一个JavaScript实现的特效,它在鼠标悬停(mouseover)某个元素时,会触发一个特定的动画效果,即上部的图片从小到大闪动出现。这个特效适用于谷歌浏览器(Google ...
在JavaScript(简称JS)中实现图片预览,尤其是在兼容老版本的Internet Explorer(如IE6、IE7、IE8)以及Firefox(FF)等浏览器上,需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能,并着重...
接下来,我们就将详细探讨如何用JavaScript编写能够兼容IE和FF浏览器的代码来获取鼠标的实时位置。 首先,我们来看一下如何在现代浏览器中获取鼠标的坐标位置。通常情况下,我们通过监听document对象的mousemove...
在本示例中,"js新闻上下滚动效果(兼容IE和ff)"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果,这种效果常见于新闻网站,能够展示多条新闻,同时保持页面空间的有效利用。这个效果不仅在现代...
- **鼠标坐标**:IE使用`event.x`和`event.y`获取鼠标坐标,FF则使用`event.pageX`和`event.pageY`。通用的解决方案是使用`event.clientX`和`event.clientY`,它们在两个浏览器中都可用。 - **事件源**:IE使用`...
标题中的“兼容IE和FF的网页js日历”指的是一个JavaScript实现的日历插件,它能够同时在Internet Explorer(简称IE)和Firefox这两个不同的浏览器上正常工作。在Web开发中,由于IE和Firefox对某些CSS样式和...
### IE和FF兼容性大集合 随着互联网技术的迅速发展,各式各的浏览器层出不穷,而浏览器之间的兼容性问题成为开发者必须面对的一个挑战。本文将基于实际经验与网络资源,总结Internet Explorer (IE) 和 Firefox (FF)...
由于Firefox(MF/FF)和Internet Explorer(IE)对JavaScript的支持存在差异,因此需要采取特定的兼容性策略。以下是一些关键的兼容性问题及其解决方案: 1. **事件对象**: - **window.event**:IE支持window....
- **FF**: FF中使用`event.pageX`和`event.pageY`来获取鼠标位置。 **示例**: ```javascript var mX = event.x ? event.x : event.pageX; // 如果event.x存在,则使用event.x;否则使用event.pageX ``` #### 5. ...
标题“鼠标右键选中copy功能(IE&FF兼容)”涉及到的是网页开发中关于鼠标右键功能的实现,特别是如何实现在Internet Explorer(IE)和Firefox(FF)这两种不同的浏览器中,用户通过右键选择复制(Copy)的功能。...
### IE和FF兼容问题详解 #### 一、引言 随着互联网技术的不断发展与普及,网页设计者们面临着越来越复杂的浏览器兼容性挑战。在众多浏览器中,Internet Explorer(简称IE)与Firefox因其庞大的用户基数而成为了...
为了兼容IE,我们可以采用`:hover`, `:active`, `:link`, `:visited`(即HALV顺序)的方式来定义样式。这样可以确保在IE中也能正确应用:hover的状态。 #### 4. 设置链接的样式 对于链接样式的设置,可以通过定义`:...
标题中的“兼容ff和ie的鼠标样式”指的是在网页开发中,不同的浏览器(如Firefox和Internet Explorer)可能对CSS样式的解析存在差异,导致鼠标指针样式显示不一致的问题。解决这个问题通常需要编写特定的CSS hack...
本资源包“各种兼容FF和IE的JS下拉菜单”集合了多种适用于Firefox(FF)和Internet Explorer(IE)浏览器的JavaScript下拉菜单实现,旨在帮助开发者在不同浏览器间实现兼容性。 1. **跨浏览器兼容性**:在Web开发中...
纯JS拖动IDV,不需要第三方库,兼容IE6 7 8 9 以上版本和 谷歌、火狐浏览器。代码简洁,在FF 谷歌浏览器 是拖动时,鼠标可以保持MOVE样式不变。
### DIV+CSS 兼容性 IE FF:深入探讨浏览器间的差异与共通点 #### 一、引言 随着Web技术的发展,DIV+CSS布局已成为网页设计中的主流方式。然而,在实际开发过程中,不同的浏览器(如Internet Explorer 6/7/8、Fire...