Javascript “隐藏”按钮位于“外部div”轻触按钮上

我试图让一个按钮在用户不与它交互或它不是用户的焦点时不再显示。我现在正在项目中使用react

在桌面设置中，我通过说

onmouseleave={this.hideButton}

来实现这一点，但我在使用iPad时遇到了更困难的问题。我试过

onTouchCancel={this.hideButton}

，但运气不好

我查看并看到有一个touchTarget列表，但我没有看到任何关于如何访问这些属性的文档，我这样做是不是走对了路

我以前尝试过的是让

body

元素使用onClick事件进行侦听，并在按钮显示时隐藏按钮，但这不起作用，因为在按钮显示时单击按钮将显示我希望在按钮单击时显示的模式

我还应该注意，

this.hideButton

只是将布尔值从true更改为false

有什么建议吗

注意：这是一个我们决定不使用jQuery的工作项目（不是我的电话）

以下是它当前的外观：

toggleLogoutButton() {
    this.setState({
        logoutButtonVisible: this.props.shouldShowLogoutButton
        && !this.state.logoutButtonVisible,
    });
}

logoutButtonAction() {
    this.toggleLogoutButton();
    this.props.showModal();
}

hideLogoutButton() {
    if (this.state.logoutButtonVisible) {
        this.setState({
            logoutButtonVisible: false,
        });
    }
}

render() {
  return(
  <div className="some-style-1" >
  <span 
  className="some-style-2" 
  onClick={this.toggleLogoutButton}>{this.props.text}
  {this.props.shouldShowLogoutButton && this.caretRender()}
  {this.state.logoutButtonVisible &&
      <div className="dropmenu show" 
      onClick={this.logoutButtonAction}
      onMouseLeave={this.hideLogoutButton}
      onTouchEnd={this.hideLogoutButton}>
         Log Out
      </div>}
   </span>
 </div>);
}

toggleLogoutButton（）{
这是我的国家({
logoutButtonVisible:this.props.shouldShowLogoutButton
&&！this.state.logout按钮不可见，
});
}
logoutButtonAction（）{
this.toggleLogoutButton（）；
this.props.showModal（）；
}
hideLogoutButton（）{
if（this.state.logout按钮可见）{
这是我的国家({
logoutButtonVisible:false，
});
}
}
render（）{
返回(
{this.props.text}
{this.props.shouldShowLogoutButton&&this.caretRender（）}
{this.state.logoutButtonVisible&&
注销
}
);
}

请包含更多代码！ 为了诊断您需要什么，我们需要查看您已经拥有了什么

首先，改变

onMouseLeave={this.hideButton}

到（假设您的按钮名称具有
id=“按钮名称”
）

$（'#按钮名'）.onMouseLeave={this.hide（）}

根据您希望按钮显示/隐藏的方式，我不建议使用此选项。相反，将按钮转到
disabled=true
。如果您将其隐藏，它将消失，并且不再能够通过
onMouseEnter
访问

比如说,

$（'#按钮名'）.onMouseLeave={this.disabled=true；}

尽管如此，隐藏（甚至禁用MouseLeave上的按钮…）并没有多大意义
 如果按钮被隐藏，用户将如何知道它在那里？假设屏幕上有一个包含“下拉”按钮的元素，例如，用户单击所述元素，变量
displayButton
为真，按钮显示。用户单击屏幕上的其他地方，我们希望
displayButton
设置为false。但这是在iPad上，所以把它当作点击事件是行不通的@DenisMatafonov这是否澄清了情况？