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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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 array数组的教程详解
2013/06/05 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
php实现文件上传基本验证
2020/03/04 PHP
详解php反序列化
2020/06/10 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
node.js超时timeout详解
2014/11/26 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python通过select实现异步IO的方法
2015/06/04 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python之用户输入的实例
2018/06/22 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python判断元素是否存在的实例方法
2020/09/24 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
新护士岗前培训制度
2014/02/02 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
医德医风演讲稿
2014/05/20 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
MySQL 开窗函数
2022/02/15 MySQL