javascript - 如何在textarea的onFocusOut之前调用button的onclick？

Question

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

问题是当我按下按钮时，该按钮应该删除 td 元素的父元素，我失去了 textarea 的焦点，并且在按钮的 onclick 事件处理程序触发之前按钮被隐藏。

以下是元素:

<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 事件属性 latedTarget，我们可以有条件地允许 button 在点击时不被隐藏。

我稍微改变了你的代码:

1. 在您的 textarea 内联 onfocusout 属性中，我们必须将 window.event 属性传递给您的函数，以便我们可以捕获focusout 事件。

2. 我们需要访问函数中的 focusout 事件，因此我们也将其包含在其中:

onFocusOut =(文本区域，事件)=> {

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>