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

您可以稍微更改一下代码，而不是使用blur和focus，您可以在不同的元素上使用click：

//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对象接收事件。

单击鼠标时防止输入模糊

1 个答案: