用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获取元素索引值index()示例
Feb 13 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
js 作用域和变量详解
Feb 16 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
javaScript Array api梳理
Mar 31 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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JS重载实现方法分析
2016/12/16 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python实现实时监控文件的方法
2016/08/26 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python telnet登陆功能实现代码
2020/04/16 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
广告词串烧
2014/03/19 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
python turtle绘图
2022/05/04 Python