用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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 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
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
简单的js计算器实现
2016/10/26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python调用shell的方法
2013/11/20 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python实现图片识别汽车功能
2018/11/30 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python argparser的具体使用
2019/11/10 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
募捐倡议书怎么写
2014/05/14 职场文书
团队口号大全
2014/06/06 职场文书
百日安全生产活动总结
2014/07/05 职场文书
承诺书样本
2014/08/30 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
《开国大典》教学反思
2016/02/16 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android