Question

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

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/

按钮仍应移动。但它也应该收到点击事件。

Answer 1

在隐藏的元素周围添加一个高度为Fiddle

的容器

.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);
});

Other fiddle

Answer 2

尝试......

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

这将检查按钮是否被点击并触发它......

Answer 3

隐藏文本框，改为：

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

并可选择设置<div>的高度以防止按钮随此CSS移动：

#hideMeOnFocusOut {
    height:80px;
}

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

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

移动按钮不会收到点击事件

3 个答案: