问题是div似乎丢失了click事件,因为活动按钮现在太小,因此click不再在按钮内(尝试较大的按钮编号,但单击变为白色的位,您将看到它有相同的问题)。
https://developer.mozilla.org/en-US/docs/Web/Events/click
-
当在单个元素上按下并释放定点设备按钮(通常是鼠标的主按钮)时,将触发click事件。
这意味着当按钮被释放时,由于鼠标已缩小而不再位于按钮中,该按钮的单击事件将不会触发
使用mousedown来捕获事件怎么样:
document.querySelectorAll("button").forEach((itm) => {
itm.addEventListener("mousedown", function() {
console.log("press"); // changed to console so you can see it fire in the snippet as well as the animation taking place (which wuldn't happen with an alert)
});
})
button {
cursor: pointer;
user-select: none;
outline: none;
background-color: #c7ffff
}
button {
border: 25px solid red;
box-sizing: border-box;
}
#b1:active {
transform: scale(0.4)
}
#b2:active {
transform: scale(0.95)
}
<!-- Click on the border on each one of then-->
<!-- Then click on the center, and it works in both-->
<button id="b1">Click Me</button>
<button id="b2">Click Me x2</button>
