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实现画板的代码
Sep 05 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php获取linux命令结果的实例
2017/03/13 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
详解如何较好的使用js
2016/12/16 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
社区党员先进事迹
2014/01/22 职场文书
设计顾问服务计划书
2014/05/04 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
地球一小时活动总结
2015/02/27 职场文书
休学证明范本
2015/06/19 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
详解Python中的进程和线程
2021/06/23 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题