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

我怀疑你是否看到了一个“泡沫破灭”的事件＆＃34;从那个LI里面。基本上，＆＃34;模糊＆＃34;例如，来自INPUT的事件会触发所有＆＃34;模糊＆＃34;那个输入的处理程序。然后它会触发所有＆＃34;模糊＆＃34; FORM上的处理程序。然后它会触发＆＃34;模糊＆＃34;李的处理程序 - 隐藏它。

除非您致电stopPropagation以阻止此事件，否则事件会一直持续到DOM树。在您的情况下，您应该能够使用event.target属性来查看事件是否实际源自LI，并且仅在该情况下隐藏它（警告：未经测试）：

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

希望有所帮助！

PS：有关其他警告，请参阅blur event上的页面。

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

1 个答案: