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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
js实现div在页面拖动效果
May 04 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
jQuery返回定位插件详解
May 15 jQuery
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
Vue实现穿梭框效果
Sep 30 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 动态执行带有参数的类方法
2009/04/10 PHP
php 函数中使用static的说明
2012/06/01 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python API自动化框架总结
2019/11/12 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
毕业生自荐书模版
2014/01/04 职场文书
集中采购方案
2014/06/10 职场文书
素质教育标语
2014/06/27 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle