JavaScript/jQuery事件排序问题？

我对没有按预定顺序触发的事件有问题。我在focus和focusout的输入元素上有一个事件。.focus（）显示一些内容，.focusout（）将其隐藏。我希望能够对使用.focus（）显示的一些数据执行.click（），但是，当我单击它时，首先要触发的是.focusout（）事件处理程序，出于某种原因，隐藏内容的操作会与.click（）事件处理程序发生冲突

以下是我的事件侦听器：

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

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

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

如果有任何一个问题令人困惑，您可以从中看到确切的行为。单击输入框时，将显示红色框。但是如果您随后尝试激活红色框上的单击侦听器，.focusout（）将优先并隐藏内容，不会发生.click（）事件

所需行为：单击输入，内容显示，单击内容，内容单击侦听器激发。

更新 这就是你想要的：

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

这很有效。

编辑、更新

试一试

$（“#内容”）。单击（函数（evt）{
警惕（“耶”）；
});
$（'input'）.focus（函数（）{
$（“#内容”）.show（）；
});
$（'input'）。on（“focusout”，function（）{
$（'#content'）。延迟（100）。隐藏（1）；
});
#内容{
高度：200px；
宽度：200px；
显示：无；
}
#内容{
背景色：红色；
}

试试看


$（“#内容”）。单击（函数（evt）{
clearTimeout（$（this）.data（'focusTimer'））
});
$（文档）。单击（函数（e）{
if（$（e.target）.最近（'#content'）。长度==0）{
$（“#内容”）.hide（）；
}
})
$（'input'）.focus（函数（）{
$（“#内容”）.show（）；
});
$（'input'）.focusout（函数（）{
var timer=setTimeout（函数（）{
$（“#内容”）.hide（）；
}, 500)
$（'content'）。数据（'focusTimer'，计时器）；
});
#内容{
高度：200px；
宽度：200px；
显示：无；
}
#内容{
背景色：红色；
}

除非单击内容div之外的任何位置，它不会隐藏内容div。目的不是在单击内容div时隐藏内容。内容应根据输入是否聚焦显示/隐藏，并且仍然可以单击。它在单击之前会隐藏，因此不会触发单击事件，因为它未单击。不确定我是否确切知道您想要什么，但这是否接近？@j08691或多或少。你解决了这个问题，但我更好奇的是为什么会这样。我以为事件是先进先出的。@ShaifulIslam据我所知，事件发生在先进先出队列中。由于我首先定义了click事件，所以我假设它将首先被调用。您可以使用@guest271314解决方案，它几乎不延迟地隐藏内容，以便click event Fire，但如果您单击它之外的任何位置，它不会隐藏内容div。是的，这解决了问题。我想我并不是真的在寻找一个直接的解决方案（这很好，不要误解我的意思），而是为了了解发生了什么以及为什么事件不是FIFO。@bawjensen看到“一个元素即将失去焦点（气泡）。”“一个指向设备按钮已在一个元素上按下并释放。”@bawjensen
focusout
在指向设备前显示点火
单击
事件已“释放”@guest271314这正是我想要的解释。非常感谢。
$('#content').click(function(evt) {
    alert('Yay'); 
});

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

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