用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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php安装swoole扩展的方法
2015/03/19 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
express express-session的使用小结
2018/12/12 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
python 连接各类主流数据库的实例代码
2018/01/30 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
庆祝教师节演讲稿
2014/09/03 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
矛盾论读书笔记
2015/06/29 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技