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 相关文章推荐
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
JavaScript实现分页效果
Mar 28 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
JS实现简单日历特效
Jan 03 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python数据结构之图的实现方法
2015/07/08 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python requests.post带head和body的实例
2019/01/02 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python 实现目录复制的三种小结
2019/12/04 Python
parser.add_argument中的action使用
2020/04/20 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
村级干部党员公开承诺事项
2015/05/04 职场文书
生活委员竞选稿
2015/11/21 职场文书