在页面中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 相关文章推荐
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
浅谈javascript的调试
Jan 28 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
JavaScript十大取整方法实例教程
Dec 03 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
cmd下运行php脚本
2008/11/25 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php实现等比例压缩图片
2018/07/26 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
Python 复平面绘图实例
2019/11/21 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
招聘单位介绍信
2014/01/14 职场文书
初一新生军训方案
2014/05/22 职场文书
计算机求职信
2014/07/02 职场文书
2014年机关工会工作总结
2014/12/19 职场文书