用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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
JS原型与继承操作示例
May 09 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
UNIX文件类型
2013/08/29 面试题
初一生物教学反思
2014/01/18 职场文书
优秀教师获奖感言
2014/01/31 职场文书
社区庆八一活动方案
2014/02/02 职场文书
房屋租赁协议书
2014/04/10 职场文书
倡议书的写法
2014/08/30 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android