用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通过class来获取元素实现代码
Feb 20 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
Weex开发之地图篇的具体使用
Oct 16 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
js实现网页随机验证码
Oct 19 Javascript
JavaScript高级程序设计之基本引用类型
Nov 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学习 字符串课件
2008/06/15 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python多进程重复加载的解决方式
2019/12/13 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
应用艺术毕业生的自我评价
2013/12/04 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
高级编程求职信模板
2014/02/16 职场文书
党课培训主持词
2014/04/01 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
民主生活会意见
2015/06/05 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL