用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 Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP中的事务使用实例
2015/05/26 PHP
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
django序列化serializers过程解析
2019/12/14 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python复合条件下的字典排序
2020/12/18 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
经营理念标语
2014/06/21 职场文书
英语教师个人工作总结
2015/02/09 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
react 路由Link配置详解
2021/11/11 Javascript
MySQL分区路径子分区再分区
2022/04/13 MySQL