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代码
May 13 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
require.js的用法详解
Oct 20 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
纯javascript版日历控件
Nov 24 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
FCKeditor添加自定义按钮
2008/03/27 PHP
php 清除网页病毒的方法
2008/12/05 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php上传图片类及用法示例
2016/05/11 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python读取xml文件方法解析
2020/08/04 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
护士自我鉴定范文
2013/10/06 职场文书
班组长竞聘书
2014/03/31 职场文书
赔偿协议书范本
2014/04/15 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
使用scrapy实现增量式爬取方式
2022/06/21 Python