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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
js实现移动端轮播图
Dec 21 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
python django事务transaction源码分析详解
2017/03/17 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Selenium的使用详解
2018/10/19 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
非常详细的C#面试题集
2016/07/13 面试题
医药代表个人的求职信分享
2013/12/08 职场文书
法学求职信
2014/06/22 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏