现有一段代码,要求按下带有边框的box时添加active样式,鼠标抬起后,取消样式。
<!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>Document</title>
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 400px;
margin: 20px;
border: 1px solid #333;
text-align: center;
}
.active {
background-color: #bfd;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<script>
const boxes = document.querySelectorAll('.box');
// 定义鼠标按下事件处理函数
function handleMouseDown(event) {
event.target.classList.add('active');
}
function handleMouseUp(event) {
event.target.classList.remove('active');
}
// 遍历所有符合条件的元素,为它们添加鼠标按下与抬起的回调
boxes.forEach(box => {
box.onmousedown = function (e) {
handleMouseDown(e)
};
box.onmouseup = function (e) {
handleMouseUp(e)
};
});
</script>
</body>
</html>
可以发现在每个box元素内部触发mouseup事件,状态正常。但是在box元素触发mousedown然后将鼠标移出元素再mouseup,并没有取消掉active样式。
这是由于给每个box元素添加了mouseup事件,所以当鼠标在元素外部时,并不会触发。将mouseup事件交给window处理即可。
优化后:
<!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>Document</title>
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 400px;
margin: 20px;
border: 1px solid #333;
text-align: center;
}
.active {
background-color: #bfd;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<script>
const boxes = document.querySelectorAll('.box');
// 定义鼠标按下事件处理函数
function handleMouseDown(event) {
event.target.classList.add('active');
window.onmouseup = function () {
handleMouseUp(event)
};
}
function handleMouseUp(event) {
event.target.classList.remove('active');
}
// 遍历所有符合条件的元素,为它们添加鼠标按下与抬起的回调
boxes.forEach(box => {
box.onmousedown = function (e) {
handleMouseDown(e)
};
});
</script>
</body>
</html>
功能正常: