在页面中js获取光标/鼠标的坐标及光标的像素坐标


Posted in Javascript onNovember 11, 2013

近期为网站开发页面统计,以前虽然也开发过,但是功能不是很全,所以这次把一些好功能给用上。

例如这次的,页面JS光标/鼠标坐标,你也许问着有什么用,百度统计中有个热点统计图,这下清楚明白了吧。

好了,上肉:
功能:获取光标的像素坐标

<html> 
<head> 
<script type="text/javascript"> 
function showPosition(e){ 
var x,y; 
var e = e||window.event; document.getElementById("x").value = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; 
document.getElementById("y").value = e.clientY+document.body.scrollTop+document.documentElement.scrollTop 
} 
</script> 
</head> 
<body> 
<div onmousemove="showPosition(event);" style="height:100%; width:100%;"> 
x:<input id="x" type="text" value="" /> 
y:<input id="y" type="text" value="" /> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
js中关于一个分号的崩溃示例
Nov 11 #Javascript
javascript中怎么做对象的类型判断
Nov 11 #Javascript
jquery隐藏标签和显示标签的实例
Nov 11 #Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 #Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 #Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 #Javascript
javascript内存管理详细解析
Nov 11 #Javascript
You might like
理解php Hash函数,增强密码安全
2011/02/25 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
由浅入深讲解python中的yield与generator
2017/04/05 Python
django 常用orm操作详解
2017/09/13 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
军训生自我鉴定范文
2013/12/27 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
公司授权委托书范文
2014/08/02 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
浅谈JavaScript作用域
2021/12/06 Javascript
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
Python实现对齐打印 format函数的用法
2022/04/28 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript