Javascript 移动按钮不'；无法接收单击事件

我有一个文本字段，当它失去焦点时应该隐藏。我还有一个按钮。问题是，当您单击按钮时，文本字段首先会失去焦点，从而移动按钮，使其无法接收单击事件

HTML:

---

按钮仍应移动。但它也应该接收单击事件

添加一个容器，其高度围绕要隐藏的元素：

HTML

试试

  $('#focusMeOut').on('focusout', function(e) {
    $('#hideMeOnFocusOut').hide();
      if (e.relatedTarget.id==="clickMe") {
          $("#clickMe").trigger('click');
      }
  });

---

这将检查按钮是否被单击并启动…

隐藏文本框，改为使用：

$('#focusMeOut').on('focusout', function(e) {
  $(this).hide(); //this line changed
});

还可以选择设置

的高度，以防止按钮随此CSS移动：

#hideMeOnFocusOut {
    height:80px;
}

您现在可能想更恰当地重命名您的ID

<div class="container">
    <div id="hideMeOnFocusOut">
        <input type="text" id="focusMeOut" autofocus>
        <br>
        <br>
        <br>
    </div>
</div>

$('#focusMeOut').on('focusout', function (e) {
    setTimeout(function() {
        $('#hideMeOnFocusOut').hide();
    }, 250);
});

  $('#focusMeOut').on('focusout', function(e) {
    $('#hideMeOnFocusOut').hide();
      if (e.relatedTarget.id==="clickMe") {
          $("#clickMe").trigger('click');
      }
  });

$('#focusMeOut').on('focusout', function(e) {
  $(this).hide(); //this line changed
});

#hideMeOnFocusOut {
    height:80px;
}