我有一个消息空间,响应字段很好,底部很小。当用户点击时,它会展开。然而,当我专注时,如果我然后单击我的按钮,它会失去焦点 - 正如预期的那样,但是按钮没有被触发,我必须再次点击它。我怎样才能最好地解决这个问题?
Font paraFont = FontFactory.getFont(FontFactory.HELVETICA,14);
Paragraph p = new Paragraph(format.format(cal.getTime()));
p.setAlignment(Element.ALIGN_LEFT);
p.setFont(paraFont);
cell.addElement(p);
.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;
}
答案 0 :(得分:4)
我认为问题在于,当您点击时,该按钮在此处不是技术上,而只是可视。如果添加一个覆盖所有空间的包装器,您可以从第一次捕获单击。
当您进行快速转换时,浏览器正在计算并更新按钮的位置;因此,您的点击位于按钮区域之外。
您可能还会注意到,在此解决方案中,如果单击按钮下方,则可能由于相同原因而无法触发警报。包装纸的高度迅速下降,咔哒声可能在外面。
.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>
答案 1 :(得分:0)
我不知道这对你是否有效,因为我不了解你的需求,但是如果你使用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;
}
&#13;
<div class="wrap">
<textarea></textarea>
<a class="fancy-button" onclick="alert('click');"><a/>
</div>
&#13;