下面是我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic and Draggable Divs</title>
<link rel="stylesheet" href="dynamicDivs.css">
</head>
<body>
<div id="touch-buttons-grid">
<div class="touch-button" draggable="true">Block 1</div>
<div class="touch-button" draggable="true">Block 2</div>
<div class="touch-button" draggable="true">Block 3</div>
<div class="touch-button-spots"></div>
<div class="touch-button-spots"></div>
<div class="touch-button-spots"></div>
</div>
<script src="dynamicDivs.js"></script>
</body>
</html>字符串
在制作这个项目的时候，我想对标记为Block 1、Block 2和Block 3的块做几件事：
1.基于“click”事件更改颜色。
1.在“mousedown”事件中，我希望这些框看起来像是被按下的，而不是“阴影”效果。
1.在“mouseup”事件中，我希望方框具有基于“click”事件中样式更改的box-shadow属性。
我的JavaScript代码实现了目标1。对于目标#2和目标#3，只有当区块为蓝色而不是红色时，它才起作用。
在下面的代码中，我希望我的box-shadow属性与position属性“top”和“left”一起被正确地操作。
下面是我的JavaScript代码（它是Vanilla JavaScript！）。这就是问题发生的地方：
const touchButtons = document.querySelectorAll(".touch-button");
let draggedElement = null;
function toggleTouchButtonColor(event) {
if (event.target.classList.contains("touch-button")) {
event.target.classList.add("touch-button-click");
event.target.classList.remove("touch-button");
} else if (event.target.classList.contains("touch-button-click")) {
event.target.classList.add("touch-button");
event.target.classList.remove("touch-button-click");
}
}
function mouseDownTouchButton(event) {
event.target.style.top = "5px";
event.target.style.left = "5px";
}
function mouseUpTouchButton(event) {
event.target.style.top = "0px";
event.target.style.left = "0px";
}
touchButtons.forEach(function (touchButton) {
touchButton.addEventListener("mousedown", mouseDownTouchButton);
touchButton.addEventListener("mouseup", mouseUpTouchButton);
touchButton.addEventListener("click", toggleTouchButtonColor);
});型
下面是我的CSS样式表供您参考：
#touch-buttons-grid {
width: 90%;
height: 200px;
margin: 10px auto;
margin-top: 20px;
background-color: rgba(220, 200, 10, 0.5);
border-radius: 10px;
display: grid;
grid-template-columns: repeat(3, 30%);
align-items: center;
justify-content: center;
z-index: 1;
}
.touch-button, .touch-button-spots {
width: 40%;
height: 50px;
margin: 5px auto;
padding: 5px;
border-radius: 10px;
font-size: 20px;
text-align: center;
z-index: 5;
position: relative;
}
.touch-button {
background-color: rgba(60, 95, 240, 0.5);
box-shadow: 5px 5px rgba(60, 95, 240, 0.25);
}
.touch-button-click {
width: 40%;
height: 50px;
margin: 5px auto;
padding: 5px;
border-radius: 10px;
background-color: rgba(220, 41, 10, 1);
box-shadow: 5px 5px rgba(220, 41, 10, 0.5);
font-size: 20px;
text-align: center;
z-index: 5;
}
.touch-button-spots {
width: 50%;
height: 60px;
background-color: rgba(61, 54, 54, 0.75);
box-shadow: 5px 5px rgba(61, 54, 54, 0.5);
}型
1条答案
按热度按时间mnowg1ta1#
这似乎解决了它：
1）修改JavaScript，以便将函数也应用到
.touch-button-click类2）使用CSS伪类
:hover和:active制作HTML按钮点击动画3）您在
.touch-button-click的CSS中缺少position: relative例如：