JavaScript 按钮单击执行速度不够快答案

【问题标题】：JavaScript button click not executing fast enoughJavaScript 按钮单击执行速度不够快
【发布时间】：2022-01-23 23:13:47
【问题描述】：

看下面的例子。单击重置按钮，您将获得控制台日志 1，以便您确认其工作。

当您单击搜索字段时，它会展开，使按钮浮动到新行（包括重置按钮）。现在，如果您尝试在新行中单击重置按钮，则关闭搜索字段的转换将比单击重置按钮执行得更快。不是大问题，但很有趣。这是预期的行为吗？

document.querySelector(".reset").addEventListener("click", function(e) {
  console.log(1)
});

.wrap {
  max-width: 700px;
}

.a {
  padding: 10px 50px;
  background: #ccc;
  display: inline-flex;
}

.filter {
  width: 50px;
  transition: all 0.1s;
}

.filter:focus {
  width: 250px;
}

<div class="wrap">
  <input type="search" class="filter">
  <div class="a">button 1</div>
  <div class="a">button 2 </div>
  <div class="a">button 3</div>
  <div class="a reset">reset</div>
</div>

【问题讨论】：

是的。因为单击事件是在您从 .filter 元素中模糊/不聚焦后触发的。
有很多mouse events和touch events可供您使用。在您的情况下，建议使用mousedown 作为@Danny 答案。

标签： javascript html css hover

【解决方案1】：

我认为问题在于 blur 事件在 click 事件发生之前触发，要解决此问题，您可以使用在 blur 之前触发的 mousedown 事件：

document.querySelector(".reset").addEventListener("mousedown", function(e) {
  console.log(1)
});

【讨论】：

jsfiddle.net/b4opezq3 工作。

【解决方案2】：

onclick 要求事件 onmousedown 和 onmouseup 是并发的。

在您的情况下，它们由 focusout 事件分隔，因此 onclick 不会触发。

https://w3c.github.io/uievents/#click

根据环境配置，如果在按下和释放定点设备按钮之间发生了一种或多种事件类型 mouseover、mousemove 和 mouseout，则可能会调度 click 事件。

【讨论】：