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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
Javascript typeof 用法
Dec 28 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
canvas绘制多边形
Feb 24 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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/11/30 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP反射实际应用示例
2019/04/03 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
.net面试题
2015/12/22 面试题
医学生自我评价
2014/01/27 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
go设置多个GOPATH的方式
2021/05/05 Golang
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python