JS获取鼠标相对位置的方法
更新时间：2016年09月20日 16:32:48 作者：郑文亮
这篇文章主要介绍了JS获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下
本文实例讲述了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中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
最近在用uni-app开发小程序,需要获取用户所在城市,小程序本身没有这样的api,那么怎么实现呢?下面这篇文章主要给大家介绍了关于uniapp微信小程序获取当前城市名称逆地址解析的相关资料,需要的朋友可以参考下2022-11-11
使用BroadcastChannel进行跨窗口通信的实例详解
BroadcastChannel 提供了一种简单而有效的方式来实现同一浏览器环境下不同页面或脚本之间的通信,对于需要跨窗口、标签页或 iframe 同步数据的应用场景,它是一种非常便捷的解决方案,本文介绍了如何使用 BroadcastChannel 进行跨窗口通信,需要的朋友可以参考下2024-08-08
在微信小程序中,实现录音及播放功能需用到录音管理器wx.getRecorderManager()和innerAudioContext对象,调用play方法播放,结合表单,可以添加录音和播放按钮,用数据绑定保存路径,注意上传服务器保存录音文件以便持久化存储2024-10-10
这篇文章主要介绍了页面滚动事件的基础概念、应用场景及优化技巧,帮助开发者在实际项目中灵活使用滚动事件,提升用户体验,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
非常漂亮的缓冲效果代码，大家可以看看下。2009-06-06
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
今天测试代码时，发现不少IE可以运行的ajax，但在FF中报错。IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下，需要的朋友可以看下，对于以后的代码书写一定要考虑到多浏览器的兼容性。2010-04-04
这篇文章主要介绍了html的DOM中Event对象onabort事件用法,实例分析了onabort事件的适用范围与对应的javascript使用技巧,需要的朋友可以参考下2015-01-01
在Openlayers中,使用ol/sphere模块的getDistance函数可以计算两点间的大圆距离,绘制线路时,通过监听绘制事件和几何对象的变化,可实时更新距离,同时getLength函数帮助获取整条线路的长度,这些功能主要用于地理信息系统中的距离测量和地图制作2024-11-11
解读new Object()和Object.create()的区别
这篇文章主要介绍了解读new Object()和Object.create()的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
控制图片大小的方法有很多，在本文将为大家详细介绍下使用js实现缩放图片，核心代码如下，感兴趣的朋友可以参考下2013-10-10
最新评论