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入门教程(9) Document文档对象
Jan 31 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
Node.js Express安装与使用教程
May 11 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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开发模式(简写版)
2007/03/15 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
iOS10推送通知开发教程
2016/09/19 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
详解flask入门模板引擎
2018/07/18 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
详解python如何引用包package
2020/06/07 Python
python判断是空的实例分享
2020/07/06 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
趣味运动会活动方案
2014/02/12 职场文书
商业项目策划方案
2014/06/05 职场文书
家长会开场白和结束语
2015/05/29 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
岗位聘任协议书
2015/09/21 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang