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

【问题标题】：jQuery .blur() - Don't hide active divjQuery .blur() - 不要隐藏活动的 div
【发布时间】：2012-12-06 04:55:28
【问题描述】：

如果我在其中单击，为什么这段代码会隐藏在 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 内部然后单击 out（仍在列表项），它隐藏了整个列表项。有任何想法吗？我做错了什么？

【问题讨论】：

你为什么使用$.live？它已被弃用。另外，请不要贴服务器端语言代码，粘贴生成的HTML
当问题与您的后端代码无关时，最好将呈现的 html 包含在您的问题中，而不是创建它的代码。
我猜你的文本区域在 li 元素内。将焦点放在该元素上时，您的 li 元素会执行模糊功能。因此，隐藏它。您可以在隐藏之前检查 textarea 元素是否具有焦点
好吧，对不起，我编辑它以显示生成的 html 而不是服务器端代码。

标签： javascript jquery html blur

【解决方案1】：

我怀疑您看到的是从该 LI 中“冒泡”的事件。本质上，来自 INPUT 的“模糊”事件会触发该输入上的所有“模糊”处理程序。然后它会触发 FORM 上的所有“模糊”处理程序。然后它触发 LI 上的“模糊”处理程序 - 隐藏它。

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

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

希望有帮助！

PS：有关其他注意事项，请参阅blur event 上的页面。

【讨论】：