本文详细解析了使用JavaScript和CSS实现模态框拖拽功能时遇到的光标脱离与鼠标弹起事件失效问题。通过深入分析position属性的四种定位方式，指出父元素相对定位导致的坐标计算偏差，并提供修正方案。同时阐述了margin与top/left定位的叠加效应，帮助开发者避免布局异常，确保模态框交互流畅。
本文分享了一套基于JavaScript和CSS实现模态框交互效果的具体代码方案，供读者参考学习。
在开发过程中发现两个主要问题。
第一，当鼠标按下并拖动时，光标会瞬间脱离模态框区域；第二，鼠标弹起（mouseup）事件未能正常触发或生效。
针对上述问题的解决思路如下。
由于代码中使用了offsetLeft和offsetTop属性，初步排查怀疑是模态框的定位方式存在错误。
此外，关闭标签设置了绝对定位，而父级元素loginBox被设置为相对定位，这可能导致坐标参考系混乱。
为了厘清问题，需要回顾CSS中各类定位的具体行为。
1. 静态定位（position: static）：这是默认值，元素遵循文档流布局，其显示位置与源码顺序一致，不属于定位元素。
2. 相对定位（position: relative）：元素相对于其在文档流中的原始位置进行偏移，不脱离文档流。
3. 绝对定位（position: absolute）：元素相对于其最近的已定位祖先元素进行偏移；若不存在已定位祖先，则相对于根元素（html）定位。
4. 固定定位（position: fixed）：作为绝对定位的特例，元素始终相对于html元素进行定位。
所谓定位元素，是指设置了position: relative、position: absolute或position: fixed的元素。
根据上述定义，相对定位是相对于元素原始位置偏移，而非相对于html，因此将loginBox设置为相对定位会导致坐标计算错误。修正方案是将loginBox改为绝对定位或固定定位，这两种方式均能正确解决问题。
另外需注意，当使用top和left属性进行定位时，margin-top和margin-left会产生同方向的位移叠加效果，而margin-bottom和margin-right则不再产生任何间距效果。因此，保留margin: 100px auto会导致布局异常，建议将其注释掉以消除影响。
相关实现代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: white;
}
.dianji {
height: 50px;
width: 300px;
font-size: 20px;
margin: 10px auto;
cursor: pointer;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin: 100px auto; */
box-sizing: border-box;
height: 200px;
width: 370px;
background-color: white;
text-align: center;
display: none;
}
.loginBox>span {
position: absolute;
top: -15px;
right: -15px;
height: 30px;
width: 30px;
font-size: 8px;
line-height: 30px;
border-radius: 50%;
background-color: white;
border: 1px solid #cccccc;
}
.loginBox h5 {
/* position: relative; */
margin-bottom: 18px;
font-weight: normal;
font-size: 16px;
cursor: move;
}
.uname {
margin: 18px 0 15px 15px;
height: 25px;
line-height: 25px;
}
.uname span,
.psw span {
font-size: 12px;
}
.uname input,
.psw input {
height: 25px;
width: 230px;
font-size: 12px;
outline: none;
}
.loginBox button {
margin: 20px;
width: 190px;
height: 30px;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div class="dianji">点击，弹出登录框</div>
<div class="loginBox">
<span class="close">关闭</span>
<h5>登录会员</h5>
<div class="uname"><span>用户名：</span> <input type="text" placeholder="请输入用户名"></div>
<div class="psw"><span>登录密码：</span> <input type="password" placeholder="请输入密码"></div>
<button>登录</button>
</div>
<script>
var dianji = document.querySelector('.dianji');
var loginBox = document.querySelector('.loginBox');
var close = document.querySelector('.close');
var bodyy = document.body;
var move_area = document.querySelector('h5');
dianji.addEventListener('click', function() {
bodyy.style.backgroundColor = '#ccc';
loginBox.style.display = 'block';
})
close.addEventListener('click', function() {
bodyy.style.backgroundColor = 'white';
loginBox.style.display = 'none';
})
move_area.addEventListener('mousedown', function(e) {
var x = e.pageX - loginBox.offsetLeft;
var y = e.pageY - loginBox.offsetTop;
console.log('x=' + x + ' y=' + y);
document.addEventListener('mousemove', move)
function move(e) {
loginBox.style.left = e.pageX - x + 'px';
loginBox.style.top = e.pageY - y + 'px';
}
//鼠标弹起，就是让鼠标移动时间解除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>以上内容为本文的全部分享，希望能为读者的学习提供帮助，欢迎继续支持本站。