`
wxw850227
  • 浏览: 70657 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS获取鼠标位置,兼容IE FF

    博客分类:
  • js
阅读更多
由于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)

    标题“JS获取鼠标位置(兼容FF)”指的是用JavaScript实现一个能在不同浏览器,特别是Internet Explorer 6.0和Firefox 3.0.1上运行的鼠标位置获取方法。Firefox的兼容性处理是关键,因为不同的浏览器有时会有不同的...

    google鼠标经过JS特效,IE/FF兼容

    标题中的"google鼠标经过JS特效,IE/FF兼容"指的是一个JavaScript实现的特效,它在鼠标悬停(mouseover)某个元素时,会触发一个特定的动画效果,即上部的图片从小到大闪动出现。这个特效适用于谷歌浏览器(Google ...

    JS图片预览(兼容IE6、IE7、IE8和FF)

    在JavaScript(简称JS)中实现图片预览,尤其是在兼容老版本的Internet Explorer(如IE6、IE7、IE8)以及Firefox(FF)等浏览器上,需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能,并着重...

    javascript获取鼠标位置部分的实例代码(兼容IE,FF)

    接下来,我们就将详细探讨如何用JavaScript编写能够兼容IE和FF浏览器的代码来获取鼠标的实时位置。 首先,我们来看一下如何在现代浏览器中获取鼠标的坐标位置。通常情况下,我们通过监听document对象的mousemove...

    js新闻上下滚动效果(兼容IE和ff)

    在本示例中,"js新闻上下滚动效果(兼容IE和ff)"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果,这种效果常见于新闻网站,能够展示多条新闻,同时保持页面空间的有效利用。这个效果不仅在现代...

    js兼容IE火狐问题

    - **鼠标坐标**:IE使用`event.x`和`event.y`获取鼠标坐标,FF则使用`event.pageX`和`event.pageY`。通用的解决方案是使用`event.clientX`和`event.clientY`,它们在两个浏览器中都可用。 - **事件源**:IE使用`...

    兼容IE和FF的网页js日历

    标题中的“兼容IE和FF的网页js日历”指的是一个JavaScript实现的日历插件,它能够同时在Internet Explorer(简称IE)和Firefox这两个不同的浏览器上正常工作。在Web开发中,由于IE和Firefox对某些CSS样式和...

    ie和ff兼容性大集合

    ### IE和FF兼容性大集合 随着互联网技术的迅速发展,各式各的浏览器层出不穷,而浏览器之间的兼容性问题成为开发者必须面对的一个挑战。本文将基于实际经验与网络资源,总结Internet Explorer (IE) 和 Firefox (FF)...

    JavaScript兼容浏览器FFIE技巧[定义].pdf

    由于Firefox(MF/FF)和Internet Explorer(IE)对JavaScript的支持存在差异,因此需要采取特定的兼容性策略。以下是一些关键的兼容性问题及其解决方案: 1. **事件对象**: - **window.event**:IE支持window....

    IE_FF兼容性

    - **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兼容)

    标题“鼠标右键选中copy功能(IE&FF兼容)”涉及到的是网页开发中关于鼠标右键功能的实现,特别是如何实现在Internet Explorer(IE)和Firefox(FF)这两种不同的浏览器中,用户通过右键选择复制(Copy)的功能。...

    IE和FF兼容问题

    ### IE和FF兼容问题详解 #### 一、引言 随着互联网技术的不断发展与普及,网页设计者们面临着越来越复杂的浏览器兼容性挑战。在众多浏览器中,Internet Explorer(简称IE)与Firefox因其庞大的用户基数而成为了...

    ie和ff浏览器的兼容

    为了兼容IE,我们可以采用`:hover`, `:active`, `:link`, `:visited`(即HALV顺序)的方式来定义样式。这样可以确保在IE中也能正确应用:hover的状态。 #### 4. 设置链接的样式 对于链接样式的设置,可以通过定义`:...

    备忘:兼容ff和ie的鼠标样式+javascript字符串hash+浮动提示

    标题中的“兼容ff和ie的鼠标样式”指的是在网页开发中,不同的浏览器(如Firefox和Internet Explorer)可能对CSS样式的解析存在差异,导致鼠标指针样式显示不一致的问题。解决这个问题通常需要编写特定的CSS hack...

    各种兼容FF和IE的JS下拉菜单!!

    本资源包“各种兼容FF和IE的JS下拉菜单”集合了多种适用于Firefox(FF)和Internet Explorer(IE)浏览器的JavaScript下拉菜单实现,旨在帮助开发者在不同浏览器间实现兼容性。 1. **跨浏览器兼容性**:在Web开发中...

    纯JS拖动DIV,兼容IE6、7、8、9、FF、Chrome

    纯JS拖动IDV,不需要第三方库,兼容IE6 7 8 9 以上版本和 谷歌、火狐浏览器。代码简洁,在FF 谷歌浏览器 是拖动时,鼠标可以保持MOVE样式不变。

    DIV+CSS 兼容性 IE FF

    ### DIV+CSS 兼容性 IE FF:深入探讨浏览器间的差异与共通点 #### 一、引言 随着Web技术的发展,DIV+CSS布局已成为网页设计中的主流方式。然而,在实际开发过程中,不同的浏览器(如Internet Explorer 6/7/8、Fire...

Global site tag (gtag.js) - Google Analytics