移动按钮未收到单击事件

Moving button doesn't receive click event

本文关键字：单击 事件 按钮 移动      更新时间：2023-09-26

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

.HTML：

<div>
   <p> Focus on the text field, and then click the button </p>
   <div id="hideMeOnFocusOut">
        <input type="text" id="focusMeOut" autofocus>
       <br><br><br>
  </div>
  <button id="clickMe">click me</button>
</div>

.JS：

$(function() {
  $('#focusMeOut').on('focusout', function(e) {
    $('#hideMeOnFocusOut').hide();
  });
  $('#clickMe').on('click', function(e) {
    alert('clicked!');
  });
});

http://jsfiddle.net/u86ycf5e/

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

添加一个容器，并在要隐藏的元素周围添加一个高度： 小提琴

.container {
    height: 50px;
}

.HTML

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

或者，您可以通过如下setTimeout在短暂延迟后隐藏元素：

$('#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
});

并选择性地设置<div>的高度，以防止按钮使用此 CSS 移动：

#hideMeOnFocusOut {
    height:80px;
}

您现在可能希望更恰当地重命名您的 ID。

http://jsfiddle.net/u86ycf5e/4/

相关文章：