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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
js 解决“options为空或不是对象”
Dec 22 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
js实现导航吸顶效果
Feb 24 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
用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
漂亮但不安全的CTB
2006/10/09 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python实现随机漫步功能
2018/07/09 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
酒店副总岗位职责
2013/12/24 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
村委会主任先进事迹
2014/01/15 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
写求职信有什么意义
2014/02/17 职场文书
教师考核评语
2014/04/28 职场文书
老干部工作先进事迹
2014/08/17 职场文书
委托书格式要求
2015/01/28 职场文书
故宫导游词
2015/01/31 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技