当 css transform:scale() 处于活动状态时，单击边框按钮会触发单击

Question

点击事件的触发取决于transform: scale()的值。比较大的时候可以用，小的时候就不行了。

有人知道怎么解决吗？

尝试单击边框以查看它。

document.querySelectorAll("button").forEach((itm)=>{
  itm.addEventListener("click",function(){alert("press")});
})

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>

Answer 1

问题是 div 似乎失去了点击事件，因为活动按钮现在太小了，因此点击不再在按钮内（尝试更大的按钮编号，但点击那个位变成白色，你会发现它有同样的问题。

https://developer.mozilla.org/en-US/docs/Web/Events/click - The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.

这意味着当按钮被释放时，由于按钮已缩小，鼠标不再位于按钮中，因此不会触发该按钮的点击事件

如何使用 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>

当 css transform:scale() 处于活动状态时，单击边框按钮会触发单击

click on border button does trigger click when css transform:scale() is active

html

css

css-transforms