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 window.setTimeout() 的详细用法
Nov 04 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
JS实现小米轮播图
Sep 21 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/02/14 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
外贸专业求职信
2014/03/09 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Python中异常处理用法
2021/11/27 Python
vscode内网访问服务器的方法
2022/06/28 Servers