jQuery .blur（）-不要隐藏活动div

Question

如果我在内部单击，此代码为什么会隐藏用作blur（）上的jQuery选择器的div？ 如果在外部单击，则Blur（）应该仅将其隐藏。

HTML触发器：

<div class="header">To-Do <a class="triggernewtodo">Add a task...</a></div>

li显示/隐藏：

<li class="addnewtodo">
<form>
    <textarea class="addtodotextarea"></textarea>
    <div class="controlarea">
    <input class="primary" name="commit" type="submit" value="Add" />
    </div>
</form>
</li>

jQuery的：

// Show/Hide New Todo form
$('a.triggernewtodo').click(function() {
    $('li.addnewtodo').show()
    $('textarea.addtodotextarea').focus();
});

$('li.addnewtodo').live("blur", function() {
    $(this).hide();
})

我的猜测是，它与放置在textarea上的.focus（）有关，因为如果我取出该.focus（），它会正常工作，直到我在textarea内单击然后单击（仍然在列表项内）它隐藏了整个列表项。 有任何想法吗？ 我究竟做错了什么？

Answer 1

我怀疑您在该LI内看到了一个“冒泡”的事件。 本质上说，来自INPUT的“模糊”事件会触发该输入上的所有“模糊”处理程序。 然后，它触发FORM上的所有“模糊”处理程序。 然后，它会触发LI上的“模糊”处理程序-将其隐藏。

除非您调用stopPropagation来阻止该事件 ，否则该事件将一直持续到DOM树。 在您的情况下，您应该能够使用event.target属性来查看事件是否真正起源于LI，并仅在那种情况下将其隐藏（警告：未经测试）：

$('li.addnewtodo').live("blur", function(event) {
    if(event.target == this)
    {
        $(this).hide();
    }
});

希望有帮助！

PS：有关其他警告，请参见有关模糊事件的页面。