如何在textarea的onFocusOut之前调用按钮的onclick？

Question

所以我有这个td元素，它包含文本区域和按钮。当文本区域聚焦时，按钮会显示，否则将保持隐藏。

问题是当我按下按钮，它应该删除td-元素的父元素时，我失去了文本区域的焦点，该按钮在按钮按下扳机之前就被隐藏了。

以下是这些要素：

<td>
    <textarea oninput='textHeight(this)' onfocus='onFocus(this)' onfocusout='onFocusOut(this)'></textarea>
    <button onclick='deleteNote(this)'>X</button>
</td>

JavaScript：

onFocus = (textarea) => {
    textarea.parentElement.querySelector("button").style.display = "inline";
}
onFocusOut = (textarea) => {
    textarea.parentElement.querySelector("button").style.display = "none";
}
deleteNote = (btn) => {
    btn.parentElement.parentElement.remove();
}

Answer 1

我想出了如何得到你想要的结果。通过使用focusout事件属性relatedTarget，我们可以有条件地允许在单击button时不隐藏它。

我稍微修改了你的代码：

1. 在textarea内联onfocusout属性中，我们必须将window.event属性传递给您的函数，以便捕获focusout事件。
2. 我们需要在您的函数中访问focusout事件，因此我们也包括它：

onFocusOut = (textarea, event) => {

​

onFocus = (textarea) => {
    textarea.parentElement.querySelector("button").style.display = "inline";
}
onFocusOut = (textarea, event) => {
    /* this was added to show the button if it's being clicked on*/
	if(event.relatedTarget != null){
  	if(event.relatedTarget.tagName == 'BUTTON'){
  	return
  	}
  }
	textarea.parentElement.querySelector("button").style.display = "none";
}
deleteNote = (btn) => {
    btn.parentElement.parentElement.remove();
}

<td>
    <textarea oninput='textHeight(this)' onfocus='onFocus(this)' onfocusout='onFocusOut(this, window.event)'></textarea>
    <button onclick='deleteNote(this)'>X</button>
</td>

​

Answer 2

如果在textarea不为空时不隐藏按钮，该怎么办？

onFocusOut = (textarea) => {
    if (textarea.value === "")
        textarea.parentElement.querySelector("button").style.display = "none";
}