js获取鼠标点击的位置实现思路及代码


Posted in Javascript onMay 09, 2014

copy来的,但是原页面的代码还是需要修改,下面是修改可用的

常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的,而不考虑页面的滚动条所滚动的距离。

function pointerX(event) 
{ 
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); 
} function pointerY(event) 
{ 
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
}

两个方法分别获得相对整个页面(而不是屏幕)的鼠标位置

event.pageX是在FF中所支持的,这样就实现了跨浏览器操作

只需在其他方法中调用这两个函数就可

function getPointPosition(event) 
{ 
var x_px_scr = event.clientX; 
var y_px_scr = event.clientY; 
alert("相对于当前屏幕的X轴偏移量" + x_px_scr);<span style="font-family: tahoma, helvetica, arial;">//相对于设备(PC或移动设备)</span> 
alert("相对于当前屏幕的Y轴偏移量" + y_px_scr);//相对于设备(PC或移动设备) 
var x_Px_page = pointerX(event); 
var y_Px_page = pointerY(event); 
alert("相对于整个页面的X轴偏移量" + x_Px_page); //相对于浏览器 
alert("相对于整个页面的Y轴偏移量" + y_Px_page); //相对于浏览器 
}
Javascript 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
用js格式化金额可设置保留的小数位数
May 09 #Javascript
JQuery动画animate的stop方法使用详解
May 09 #Javascript
Javascript玩转继承(三)
May 08 #Javascript
Javascript玩转继承(二)
May 08 #Javascript
js的Prototype属性解释及常用方法
May 08 #Javascript
Javascript玩转继承(一)
May 08 #Javascript
玩转方法:call和apply
May 08 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
JS重载实现方法分析
2016/12/16 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
估算杭州有多少软件工程师
2015/08/11 面试题
简短大学毕业感言
2014/01/18 职场文书
九年级历史教学反思
2014/01/27 职场文书
小学生暑假感言
2014/02/06 职场文书
红色故事演讲稿
2014/05/22 职场文书
精神病医院见习报告
2014/11/03 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书