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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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通过修改header强制图片下载的方法
2015/03/24 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JS与C#编码解码
2013/12/03 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
python解析xml模块封装代码
2014/02/07 Python
python中ConfigParse模块的用法
2014/09/29 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python实现自动发送邮件
2018/06/20 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python中_del_还原数据的方法
2020/12/09 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
医院辞职信范文
2014/01/17 职场文书
出国留学经济担保书
2014/04/01 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
活动总结模板
2014/05/09 职场文书
李开复演讲稿
2014/05/24 职场文书