jquery - 防止鼠标单击时输入模糊

Question

我有一个文本输入和一个隐藏列表。该列表将在聚焦和模糊输入时显示和隐藏。但是，我希望当我单击列表(在输入之外)时列表仍然显示，即仅在单击列表外部时隐藏列表。如何实现？

==== html ====

<input type="text" id="regioninput">
<ol class="continentlist">
  //php code to generate list items
</ol>

==== js ====

$('#regioninput').bind('focus', function() {
    $('.continentlist').show();
});
$('#regioninput').bind('blur', function() {
    $('.continentlist').hide();
});
$('.continentlist li').live('click', function() {
    alert($(this).html());
    ...
});

Answer 1

您可以稍微更改您的代码，这样您就可以在不同的元素上使用 click 而不是使用 blur 和 focus:

//show the list when you click the input
$('#regioninput').bind('click', function(event) {
    event.stopPropagation();
    $('.continentlist').show();
});

//hide the list when the document receives a click
$(document).bind('click', function () {
    $('.continentlist').hide();
});

//make sure that if the user clicks on the list they won't hide it
$('.continentlist').bind('click', function(event) {
    event.stopPropagation();
});

这是一个演示:http://jsfiddle.net/qUeXS/

event.stopPropagation() 阻止事件在 DOM 中冒泡:http://api.jquery.com/event.stoppropagation

旁注，这是因为事件冒泡。无论您在文档的哪个位置单击，document 对象都会在 DOM 中冒泡后接收到该单击事件。因此，如果我们取消事件的冒泡，我们就可以阻止 document 对象接收事件。