JavaScript / jQuery事件排序问题?

时间:2015-02-12 04:47:24

标签: javascript jquery events listener

我遇到了未按预定顺序触发的事件的问题。我有一个关于焦点和焦点的输入元素的事件。 .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()事件。

所需行为:点击输入,内容显示,点击内容,内容点击监听器触发。

3 个答案:

答案 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)

尝试

&#13;
&#13;
$('#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;
&#13;
&#13;

答案 2 :(得分:0)

修改,更新

尝试

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

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

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

&#13;
&#13;
$('#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;
&#13;
&#13;