jQuery .blur() - 不要隐藏活动的 div

Question

如果我在 blur（） 中单击它，为什么这段代码会隐藏用作 jQuery 选择器的div？Blur（） 应该只在我单击它外部时才隐藏它。

网页触发器：

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

李显示/隐藏：

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

j查询：

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

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

Answer 1

我怀疑你看到的是一个从那个 LI 内部"冒泡"的事件。 本质上，来自 INPUT 的"blur"事件会触发该输入上的所有"blur"处理程序。 然后，它会触发 FORM 上的所有"模糊"处理程序。 然后它会触发 LI 上的"模糊"处理程序 - 隐藏它。

该事件一直沿 DOM 树向上移动，除非您调用 stopPropagation 来防止这种情况。 在您的情况下，您应该能够使用 event.target 属性来查看事件是否确实源自 LI，并且仅在该情况下隐藏它（警告：未经测试）：

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

希望对您有所帮助！

PS：有关其他注意事项，请参阅有关模糊事件的页面。