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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
vant自定义二级菜单操作
Nov 02 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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
jstree的简单实例
2016/12/01 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
室内设计自我鉴定
2013/10/15 职场文书
创业计划书模版
2014/02/05 职场文书
《掌声》教学反思
2014/02/23 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
停电调休通知
2015/04/16 职场文书
信仰观后感
2015/06/03 职场文书
考研经验交流会策划书
2015/11/02 职场文书
八年级作文之感恩
2019/11/22 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Elasticsearch 配置详解
2022/04/19 Java/Android