用javascript获取当页面上鼠标光标位置和触发事件的对象的代码


Posted in Javascript onDecember 09, 2009

用javascript获取鼠标位置:

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 
}; 
} 
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获取触发事件的对象

<script language = "javascript" > 
document.onclick = onClick; 
function onClick(ev) 
{ 
ev = ev || window.event; // 事件 
var target = ev.target || ev.srcElement; // 获得事件源 
/* target.getAttribute()是获取该事件源对像里面的一些属性。 
比如对像中有(name,id,type等等);*/ 
var dragObj = target.getAttribute('id'); 
alert(dragObj); 
} 
</ script >

关键还是event对象在多浏览器下的兼容性,和上面方式是一样的,这里代码就不做说明了
Javascript 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
解决vue+webpack打包路径的问题
Mar 06 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
吃通javascript正则表达式
Apr 21 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 #Javascript
jQuery 开天辟地入门篇一
Dec 09 #Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 #Javascript
jquery 事件执行检测代码
Dec 09 #Javascript
为指定元素增加样式的js代码
Dec 09 #Javascript
javascript setTimeout和setInterval 的区别
Dec 08 #Javascript
javascript OFFICE控件测试代码
Dec 08 #Javascript
You might like
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php二分查找二种实现示例
2014/03/12 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
vant实现购物车功能
2020/06/29 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python 多线程的实例详解
2017/09/07 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
大码女装:Ulla Popken
2019/08/06 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
大专生的学习自我评价
2013/12/04 职场文书
监理资料员岗位职责
2014/01/03 职场文书
技能竞赛活动方案
2014/02/21 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
导游词之河北野三坡
2019/12/11 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python