用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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
JS手写一个自定义Promise操作示例
Mar 16 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+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
详解python中的线程
2018/02/10 Python
python构建基础的爬虫教学
2018/12/23 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python常用运维脚本实例小结
2020/02/14 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
python生成word合同的实例方法
2021/01/12 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
strlen的几种不同实现方法
2013/05/31 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
酒店员工手册范本
2015/05/14 职场文书
新闻稿件写作范文
2015/07/18 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python