兼容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 ...
随机推荐
- node之body-parser的使用
bodyparser 用来解析post的请求取代了 原生的 req.on 的方式 但是只能取到ajax 和表单的数据 ,取不到上传的文件类型. let express = require('expre ...
- 【转】在SpringMVC Controller中注入Request成员域
原文链接:https://www.cnblogs.com/abcwt112/p/7777258.html 原文作者:abcwt112 主题 在工作中遇到1个问题....我们定义了一个Controlle ...
- Python学习-------------------三级菜单简单版
题目: 多级菜单 1.三级菜单 2.可依次选择进入的各子菜单 3.所需新知识点:列表.字典 ReadMe: 这个做循环,比较绕脑子 点开运行即可 Min ...
- call/cc 总结 | Scheme
call/cc 总结 | Scheme 来源 https://www.sczyh30.com/posts/Functional-Programming/call-with-current-contin ...
- 2017年11月GitHub上最热门的Java项目出炉
2017年11月GitHub上最热门的Java项目出炉~ 一起来看看这些项目你使用过哪些呢? 1分布式 RPC 服务框架 dubbohttps://github.com/alibaba/dubbo S ...
- 【bzoj1492】 NOI2007—货币兑换Cash
http://www.lydsy.com/JudgeOnline/problem.php?id=1492 (题目链接) 题意 两种金券,金券按照比例交易:买入时,将投入的资金购买比例为$rate[i] ...
- 【bzoj1758】 Wc2010—重建计划
http://www.lydsy.com/JudgeOnline/problem.php?id=1758 (题目链接) 题意 给出一棵树,每条边有边权,问选出一条长度为$[L,U]$的路径,使得路径上 ...
- 结合NTLM中继和Kerberos委派攻击AD
0x00 前言 在上个月我深入演讲了无约束委派之后,本文将讨论一种不同类型的Kerberos委派:基于资源的约束委派.本文的内容基于Elad Shamir的Kerberos研究,并结合我自己的NTLM ...
- IntelliJ IDEA远程调试运行中的JAVA程序/项目
一.IntelliJ IDEA配置 1.添加一个运行配置(remote项) 2.打开remote项配置对话框 3.远程jvm参数配置提示 4.远程调试的ip地址和端口号,ip就是java项目所在机器i ...
- .net网站iis应用池完美解决方案
一.防DDOS攻击11条: 1.确保所有服务器采用最新系统,并打上安全补丁.计算机紧急响应协调中心发现,几乎每个受到DDoS攻击的系统都没有及时打上补丁. 2.确保管理员对所有主机进行检查,而不仅针对 ...