用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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
Mac下安装vue
Apr 11 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
详解JavaScript作用域和作用域链
Mar 19 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
利用js实现简易红绿灯
Oct 15 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基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python如何写出表白程序
2020/06/01 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
网络教育自我鉴定
2013/11/01 职场文书
庆八一活动方案
2014/01/25 职场文书
银行类自荐信
2014/02/04 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python