我遇到了未按预定顺序触发的事件的问题。我有一个关于焦点和焦点的输入元素的事件。 .focus()显示一些内容,.focusout()隐藏它。我希望能够.click()显示我用.focus()显示的一些数据,但是当我点击它时,首先要点击的是.focusout()事件处理程序,由于某种原因,使用.click()事件处理程序隐藏内容螺丝的行为。
以下是我的事件监听器:
$('#content').click(function(evt) {
alert('Yay');
});
$('input').focus(function() {
$('#content').show();
});
$('input').focusout(function() {
$('#content').hide();
});
如果其中任何一个令人困惑,您可以在此jsfiddle中看到确切的行为。单击输入框时,会显示红色框。但是,如果您尝试激活红色框上的单击侦听器,则.focusout()将优先并隐藏内容,并且不会发生.click()事件。
所需行为:点击输入,内容显示,点击内容,内容点击监听器触发。
答案 0 :(得分:1)
<强>更新强> - &GT; 这就是你想要的:
$("#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);
});
这很有效。
答案 1 :(得分:1)
尝试
$('#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);
});
&#13;
#content {
height: 200px;
width: 200px;
display: none;
}
#content {
background-color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="content"></div>
<input type="search">
&#13;
答案 2 :(得分:0)
修改,更新
尝试
$('#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);
});
&#13;
#content {
height: 200px;
width: 200px;
display: none;
}
#content {
background-color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
</div>
<input type="search">
&#13;