用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 篱式条件判断
Aug 22 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
js实现弹框效果
Mar 24 Javascript
在js中修改html body的样式
Nov 11 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 采集获取指定网址的内容
2010/01/05 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
浅谈javascript 函数属性和方法
2015/01/21 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
js制作提示框插件
2020/12/24 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
详解Anaconda 的安装教程
2020/09/23 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
旅游网创业计划书
2014/01/31 职场文书
军训自我鉴定200字
2014/02/13 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
民主评议党员个人总结
2015/02/13 职场文书
小学生交通安全寄语
2015/02/27 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang