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 动态参数判空操作
Dec 22 Javascript
img标签中onerror用法
Aug 13 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
自动分页的不完整解决方案
2007/01/12 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python 监控logcat关键字功能
2020/09/04 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
护士自我介绍信
2014/01/13 职场文书
销售经理工作职责
2014/02/03 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书