JS获取鼠标相对位置的方法


Posted in Javascript onSeptember 20, 2016

本文实例讲述了JS获取鼠标相对位置的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>位置</title>
<script language="javascript" type="text/javascript">
function m(){
document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY;
} 
function c(){
 var objTop = getOffsetTop(document.getElementById("d"));//对象x位置
 var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置
 var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置
 var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置
//计算点击的相对位置
 var objX = mouseX-objLeft;
 var objY = mouseY-objTop;
 clickObjPosition = objX + "," + objY;
 alert(clickObjPosition);
}
function getOffsetTop(obj){
  var tmp = obj.offsetTop;
  var val = obj.offsetParent;
  while(val != null){
    tmp += val.offsetTop;
    val = val.offsetParent;
  }
  return tmp;
}
function getOffsetLeft(obj){
  var tmp = obj.offsetLeft;
  var val = obj.offsetParent;
  while(val != null){
    tmp += val.offsetLeft;
    val = val.offsetParent;
  }
  return tmp;
}
</script>
</head>
<body style="margin:0px;" onmousemove="m();">
<div style="padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;"> </div>
<div id="area"></div>
<div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;">
 <div id="d" style="width:200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片,因为我用div边框1px,所以两个div会有2px的位置偏移,你可以自己调整</div>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
小程序实现上下切换位置
Nov 16 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 #Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 #Javascript
AngularJS删除路由中的#符号的方法
Sep 20 #Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 #Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 #Javascript
原生js实现ajax方法(超简单)
Sep 20 #Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
js 函数性能比较方法
2020/08/24 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python中if嵌套命令实例讲解
2021/02/25 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
气象学专业个人求职信
2014/03/15 职场文书
个人授权委托书样本
2014/09/13 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
地球一小时活动总结
2015/02/27 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
初中军训感想
2015/08/07 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers