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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 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读写文件的方法(生成HTML)
2006/11/27 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
python字典排序实例详解
2015/05/20 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python2随机数列生成器简单实例
2017/09/04 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
学习交流会主持词
2014/04/01 职场文书
医学生求职信
2014/07/01 职场文书
名人演讲稿范文
2014/09/16 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
学习计划是什么
2019/04/30 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android