在页面中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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
Vue.js中数据绑定的语法教程
Jun 02 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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
PHP4中实现动态代理
2006/10/09 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
python获取本机外网ip的方法
2015/04/15 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
办公室主任职责范文
2013/11/08 职场文书
双拥工作宣传标语
2014/06/26 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
行风评议整改报告
2014/11/06 职场文书
四年级学生期末评语
2014/12/26 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS