用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日期转换 时间戳转日期格式
Nov 05 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
vue 图片裁剪上传组件的实现
Nov 12 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选项与信息函数的使用详解
2013/05/10 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Python简明入门教程
2015/08/04 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python扫描线填充算法详解
2020/02/19 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
金融保险专业求职信
2014/09/03 职场文书
大学生简短的自我评价
2014/09/12 职场文书
买房子个人收入证明
2014/10/12 职场文书
党员自评材料范文
2014/12/17 职场文书
司机岗位职责
2015/02/04 职场文书
毕业生政审意见范文
2015/06/04 职场文书
消防安全主题班会
2015/08/12 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书