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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
javascript 写类方式之一
Jul 05 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
js常见遍历操作小结
Jun 06 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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
单位速度在实战中的运用
2020/03/04 星际争霸
php 表单数据的获取代码
2009/03/10 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
如何使用angularJs
2017/05/08 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python内置模块turtle绘图详解
2017/12/09 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
django的ORM操作 增加和查询
2019/07/26 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
国庆促销活动总结
2014/08/29 职场文书
暑期家教宣传单
2015/07/14 职场文书
高中政治教学反思
2016/02/23 职场文书
门面租赁合同范文
2019/08/06 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL