离开文本区域焦点时按钮未单击

Question

我有一个消息空间，底部的响应字段又小又好。当用户单击时，它会展开。但是，当聚焦时，如果我然后单击我的按钮，它会失去焦点 - 正如预期的那样，但按钮没有被触发，我必须再次单击它。我怎样才能最好地解决这个问题？

.wrap {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:focus {
  height: 150px;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
   <textarea></textarea>
   <div class="fancy-button" onclick="alert('click');">
</div>

Answer 1

我认为问题在于，当您单击时，该按钮不是技术上的，而只是视觉上的。如果您添加一个覆盖所有空间的包装器，您可能能够从第一次就捕捉到点击。

当您进行快速转换时，浏览器正在计算并更新按钮的位置；因此您的点击位于按钮区域之外。

您可能还会注意到，在此解决方案中，如果您单击按钮下方的按钮，由于同样的原因，可能不会触发警报。包装器的高度迅速降低，点击可能在外面。

.wrap {
  display: flex;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:focus {
  height: 150px;
}
.wrap > div {
   display: flex;
   align-items:center;
}
.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
  <textarea></textarea>
  <div onclick="alert('click');">
    <div class="fancy-button" >
    </div>
  </div>
</div>

如果你只减少转换时间，你也可以在第一时间捕捉到点击：

.wrap {
  display: flex;
  align-items: center;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height 2s ease;
}

textarea:focus {
  height: 150px;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
  <textarea></textarea>
  <div onclick="alert('click');" class="fancy-button">
  </div>
</div>

你也可以保持持续时间并添加延迟：

.wrap {
  display: flex;
  align-items: center;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
  transition-delay:0.1s;
}

textarea:focus {
  height: 150px;
  transition-delay:0s;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
  <textarea></textarea>
  <div onclick="alert('click');" class="fancy-button">
  </div>
</div>

Answer 2

我不知道这是否适合您，因为我不知道您的需求，但如果您使用hover 而不是focus，则可以免费点击该按钮

.wrap {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:hover {
  height: 150px;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
   <textarea></textarea>
   <a class="fancy-button" onclick="alert('click');"><a/>
</div>