JavaScript offset实现鼠标坐标获取和窗口内模块拖动
offset
offset 即偏移量，使用 offset 系列相关属性可以 动态的 获取该元素的位置（偏移）、大小等，如：
元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注：返回的数值不带单位
offset 系列常用的属性包括：
element.offsetParent
返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回 body
注意，parentNode 和 offsetParent 还是有本质上的区别的：parentNode 返回的是直接父级元素，offsetParent 返回的是带有定位的父级元素。
element.offsetTop
返回元素带有定位父元素上方的偏移
element.offsetLeft
返回元素带有定位父元素左边框的偏移
element.offsetWidth
返回自身包括 padding, 边框, 内容区的宽度，返回数值不带单位
element.offsetHeight
返回自身包括 padding, 边框, 内容区的高度，返回数值不带单位
offset 和 style 的区别
| offset | style |
|---|---|
| offset 可以得到任意样式表中的样式值 | style 只能得到行内样式表中的样式值，无法获得内嵌样式 |
| offset 系列获得的数值是没有单位的 | style.width 获得的是带有单位的字符串 |
| offsetWidth 包含 padding+border+width | style.width 获得不包含 padding 和 border 的值 |
| offsetWidth 等属性是只读属性，只能获取不能赋值 | style 属性是可读写属性，style.width 可以获取也可以赋值 |
| 只想要获取元素大小位置的时候，用 offset 更合适 | 要对元素样式进行修改的话，使用 style 更合适 |
案例一：实时展示鼠标的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>鼠标位置获取-01</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #55aaff;
margin-left: 50px;
}
</style>
</head>
<body>
<p>获取鼠标在盒子内坐标</p>
<div class="box"></div>
<script>
// 在盒子中点击，想要获得鼠标距离盒子左右的距离
// 实现：
// 1. 获得鼠标在页面中的坐标，e.pageX, e.pageY
// 2. 获得盒子到页面中的距离, box.offsetLeft, box.offsetTop
// 3. 两者相减就能够获得鼠标在盒子中的坐标
// 下面看实现过程吧！
const box = document.querySelector(".box");
box.addEventListener("mousemove", function(e) {
// console.log(e.pageX, e.pageY);
// console.log(box.offsetLeft, box.offsetTop);
const x = e.pageX - this.offsetLeft;
const y = e.pageY - this.offsetTop;
box.textContent = `x: ${x}, y: ${y}`;
});
</script>
</body>
</html>
案例二：拖动模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模块拖动-02</title>
<style>
* {
margin: 0;
padding: 0;
}
.login,
.modal {
display: none;
}
.login {
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background-color: #fff;
box-shadow: 0 0 20px #ddd;
z-index: 999;
transform: translate(-50%, -50%);
text-align: center;
}
.modal {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 998;
}
.login-content {
margin: 100px auto;
text-align: center;
}
.login-content h3:hover,
.closeBtn:hover {
cursor: pointer;
}
.closeBtn {
position: absolute;
right: 10px;
top: 10px;
}
.login h4 {
margin-top: 10px;
}
.login h4:hover {
cursor: move;
}
</style>
</head>
<body>
<div class="login-content">
<h3 id="openLogin">点击弹出模拟框</h3>
</div>
<div class="login">
<div class="closeBtn" id="closeBtn">关闭</div>
<h4 class="loginHeader">点击我拖动吧</h4>
</div>
<div class="modal"></div>
<script>
// 获取元素
const login = document.querySelector(".login");
const modal = document.querySelector(".modal");
const closeBtn = document.querySelector("#closeBtn");
const openLogin = document.querySelector("#openLogin");
// 点击显示元素
openLogin.addEventListener("click", () => {
modal.style.display = "block";
login.style.display = "block";
});
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
login.style.display = "none";
});
// 实现拖拽移动功能
// 1. 鼠标按下获得鼠标在盒子内的坐标
const loginHeader = document.querySelector(".loginHeader");
loginHeader.addEventListener("mousedown", function (e) {
const x = e.pageX - login.offsetLeft;
const y = e.pageY - login.offsetTop;
const move = function (e) {
login.style.left = `${e.pageX - x}px`;
login.style.top = `${e.pageY - y}px`;
};
// 2. 移动鼠标
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", function () {
document.removeEventListener("mousemove", move);
});
});
</script>
</body>
</html>
到此这篇关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动的文章就介绍到这了,更多相关JavaScript鼠标坐标获取和窗口内模块拖动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS获取鼠标坐标的实例方法
复制代码 代码如下: var restrictX; var restrictY; var tip; // 鼠标坐标 function mousePosition(ev) { return { x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y : ev.clientY + document.documentElem
-
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo
-
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
JS获取鼠标坐标位置实例分析
本文实例分析了JS获取鼠标坐标位置的方法.分享给大家供大家参考,具体如下: 取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持,但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持,但是没有关系,可以通过s
-
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
获取鼠标坐标,并且根据鼠标所在div弹出不同内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <head
-
基于JavaScript实现 获取鼠标点击位置坐标的方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. 复制代码 代码
-
JavaScript获取鼠标坐标的函数（兼容IE、FireFox、Chrome）
还好网上什么都有,上网找了一个浏览器兼容性最佳的函数,经测试兼容IE.FireFox.Chrome,并且不会有滚动条误差问题,存档下,以备后用 :) 复制代码 代码如下: function mousePos(e){ var x,y; var e = e||window.event; return { x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
-
JS网页在线获取鼠标坐标值的方法
本文实例讲述了JS网页在线获取鼠标坐标值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>显示鼠标坐标</title> </head> <body onMousemove="m
-
JS获取鼠标坐标、获取鼠标像素点示例
JS获取鼠标坐标,获取鼠标像素点的典型实例,运行本页面后,随意移动鼠标的位置,可适时显现鼠标的坐标点,不占用系统资源 . JavaScript获取鼠标坐标 .tip { width:200px; border:2px solid #ddd; padding:8px; background:#f1f1f1; color:#666; } function mousePos(e){ var x,y; var e = e||window.event; return { x:e.clientX+docum
-
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
offset offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移).大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度高度) 注:返回的数值不带单位 offset 系列常用的属性包括: element.offsetParent 返回作为该元素带有定位的父级元素,如果父级元素没有定位,则返回 body 注意,parentNode 和 offsetParent 还是有本质上的区别的:parentNode 返回的是直接
-
JavaScript实现捕获鼠标坐标
本文实例为大家分享了JavaScript实现捕获鼠标坐标的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件对象</title> <style> .box1{ width: 300px; height: 100px; border: 1px solid #
-
javascript获取当前鼠标坐标的方法
本文实例讲述了javascript获取当前鼠标坐标的方法.分享给大家供大家参考.具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解.具体代码如下: 复制代码 代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars
-
Python鼠标事件及坐标获取窗口和屏幕坐标
目录 效果如下: 分析: 重写关闭事件 重写上下文菜单事件 重写自带的绘制事件 也就是自定义 重新实现调整窗口大小事件 重新实现鼠标的释放事件 重新实现鼠标的移动事件 重新实现鼠标双击事件 重新实现键盘按下事件 源码如下 本文主要介绍重写自带的一些方法,拾取屏幕和窗口坐标信息 效果如下: 分析: 定时服务:在固定一段时间后执行相关的函数方法,例如这里表示的是在0秒后执行self.giveHelp这个方法 QTimer.singleShot(0, self.giveHelp) 重写关闭事件 def
-
JS获取鼠标位置距浏览器窗口距离的方法示例
本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法.分享给大家供大家参考,具体如下: 先来看看运行效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test_div { width:400px; height: 400px;
-
js使用onmousemove和onmouseout获取鼠标坐标的方法
本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!DOCTYPE html> <html> <head> <script> function myFunction(e) { x=e.clientX; y=e.clientY; coor="Coordinat
-
JavaScript实现鼠标控制自由移动的窗口
本文实例为大家分享了JavaScript实现鼠标控制自由窗口的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用鼠标移动的窗口</title> <style> .mainDiv { width: 350px; height: 200px; borde