JavaScript/jQuery 事件排序有问题？

Question

我遇到事件未按预期顺序触发的问题。我在焦点和焦点输出的输入元素上有一个事件。 .focus() 显示一些内容，.focusout() 隐藏它。我希望能够对使用 .focus() 显示的某些数据执行 .click()，但是当我单击它时，首先触发的是 .focusout() 事件处理程序，并且对于出于某种原因，隐藏内容的操作与 .click() 事件处理程序有关。

这是我的事件监听器：

$('#content').click(function(evt) {
    alert('Yay');
});

$('input').focus(function() {
    $('#content').show();
});

$('input').focusout(function() {
    $('#content').hide();
});

如果其中有任何内容令人困惑，您可以在此 jsfiddle 中查看确切的行为。单击输入框时，会显示红色框。但是，如果您随后尝试激活红色框上的点击侦听器，.focusout() 优先并隐藏内容，并且不会发生 .click() 事件。

期望的行为：点击输入，显示内容，点击内容，触发内容点击监听器。

Answer 1

已更新-> 这就是你想要的：

$("#content").click(function (evt)
{
    if (evt.target == document.getElementById("content"))
    {  alert("Yay");
       $('#content').show();
       $('input').focus();
    }
});


$('input').focus(function() {
    $('#content').show();
});

$('input').focusout(function() {
      setTimeout(function(){ $('#content').hide(); }, 100);    
});

这有效。

Answer 2

编辑、更新

尝试

$('#content').click(function(evt) {
    alert('Yay'); 
});

$('input').focus(function() {
    $('#content').show();
});

$('input').on("focusout", function() {
    $('#content').delay(100).hide(1);
});

$('#content').click(function(evt) {
    alert('Yay'); 
});

$('input').focus(function() {
    $('#content').show();
});

$('input').on("focusout", function() {
    $('#content').delay(100).hide(1);
});

#content {
    height: 200px;
    width: 200px;
    display: none;
}

#content {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">    
</div>

<input type="search">

Answer 3

尝试

$('#content').click(function(evt) {
  clearTimeout($(this).data('focusTimer'))
});

$(document).click(function(e) {
  if ($(e.target).closest('#content').length == 0) {
    $('#content').hide();
  }
})

$('input').focus(function() {
  $('#content').show();
});

$('input').focusout(function() {
  var timer = setTimeout(function() {
    $('#content').hide();
  }, 500)
  $('#content').data('focusTimer', timer);
});

#content {
  height: 200px;
  width: 200px;
  display: none;
}
#content {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="content"></div>
<input type="search">

JavaScript/jQuery 事件排序有问题？

Issue with JavaScript/jQuery event ordering?

javascript

jquery

events

listener