兼容IE FF 获取鼠标位置
由于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是实时变动的。
第二段代码是通过函数获取当前时刻的鼠标坐标值
function getPosition(event){
event=
event || window.event;
if(event.pageX || event.pageY){
return {x:event.pageX, y:event.pageY};
}
return
{x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
y:event.clientY + document.body.scrollTop -
document.body.clientTop
};
}
这段代码的来源是这里,这个网站还提供了一些简单的样例给我们玩耍。这个函数和刚才的函数理论是一致的,先触发mousemove事件,然后获取了事件之后,分别判断浏览器类型。这段代码的优点是,不适用全局变量,并且可以随用随拿,只要调用这个函数,就能够获取鼠标坐标。
兼容IE FF 获取鼠标位置的更多相关文章
- JS获取鼠标位置,兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- javascript:与获取鼠标位置有关的属性
javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove,就可以实时获得鼠标位置。 但是!!event中和鼠标相关的属性太多了 ...
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- C++获取鼠标位置及全局检测鼠标行为
1.获取鼠标位置(在屏幕的位置) CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...
- jquery 获取鼠标位置
//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
- JavaScript获取鼠标位置的三种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...
- C# 图像处理:获取鼠标位置信息(全局)
Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...
- canvas获取鼠标位置
canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- 基于 ARM的 Windows 10S 笔记本 转帖
首款骁龙笔记本华硕畅370评测:续航不俗 性能拖后腿 2018年06月21日 12:23 新浪数码 缩小字体放大字体收藏微博微信分享 相关阅读:国内首款骁龙本华硕畅370发布:6199元送一年无限 ...
- 深入理解学习Git工作流(git-workflow-tutorial)
转载:https://segmentfault.com/a/1190000002918123#articleHeader11 人在学习git工作流的过程中,从原有的 SVN 模式很难完全理解git的协 ...
- Spring IOC AOP的原理 如果让你自己设计IOC,AOP如何处理(百度)
百度的面试官问,如果让你自己设计一个IOC,和AOP,如何设计, 我把IOC的过程答出来了,但是明显不对, (1) IOC 利用了反射,自己有个id,classtype,hashmap,所有的功能都在 ...
- 远程显示(操作) 服务器 GUI 程序(图形化界面) (基于 X11 Forwarding + Centos + MobaXterm)
在做 数据分析(数据挖掘 或 机器学习)的时候,我们经常需要绘制一些统计相关的图表,这些统计.绘图的程序常常是跑在服务器上的,可是服务器出于性能和效率的考虑,通常都是没有安装图形化界面的,于是这些统计 ...
- CSS文字过多显示省略号
CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...
- 【设计模式】—— 享元模式Flyweight
前言:[模式总览]——————————by xingoo 模式意图 享元模式,也叫[轻量级模式]或者[蝇量级模式].主要目的就是为了减少细粒度资源的消耗.比如,一个编辑器用到大量的字母数字和符号,但是 ...
- 前端学习 -- Css -- 样式的继承
像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承, 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式. 但是并不是所有的样式都会 ...
- Linux SSH免登陆配置步骤
[jans@centos2 ~]# cd ~[jans@centos2 ~]# ssh-keygen -t rsa //生成rsa加密的公钥和密钥[jans@centos2 ~]# cat .ssh ...
- oracle系统表v$session、v$sql字段说明
在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...
- Python正则表达式(regular expression)简介-re模块
Python正则表达式(regular expression)简介-re模块 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 就其本质而言,正则表达式(或RE模块)是一种小型的,高度 ...