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 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
javascript连续赋值问题
Jul 08 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
为什么node.js不适合大型项目
Apr 28 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中变量及部分适用方法
2008/03/27 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
一段实用的php验证码函数
2016/05/19 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
简单实现python爬虫功能
2015/12/31 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
市场部管理制度
2014/02/02 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
团支部推优材料
2014/05/21 职场文书
领导班子四风表现材料
2014/08/23 职场文书
优秀纪检干部材料
2014/08/27 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle