用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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
javascript动态加载二
Aug 22 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
如何提高Dom访问速度
Jan 05 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 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
PHP中设置时区方法小结
2012/06/03 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue观察模式浅析
2018/09/25 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python类共享变量操作
2020/09/03 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
骨干教师申报材料
2014/12/17 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
卖车协议书范文
2016/03/23 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
业余无线电通联Q语
2022/02/18 无线电