Question

触发点击事件取决于transform: scale()的值。当有一个相对较大的数字时，它可以工作，但是当它有一个小数字时，它就无法正常工作。

有人知道如何解决它吗？

尝试点击边框以便查看。

＆＃13;

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

＆＃13;

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)}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

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

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>

单击边框按钮会在css转换时触发单击：scale（）处于活动状态

1 个答案: