如果我在其中单击,为什么这段代码会隐藏用作 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();
})
我的猜测是它与放置在文本区域上的 .focus() 有关,因为如果我取出那个 .focus(),它会正常工作,直到我在文本区域内单击然后单击出来(仍在列表项)并隐藏整个列表项。有任何想法吗?我做错了什么?
最佳答案
我怀疑您看到的是从该 LI 中“冒出”的事件。本质上,来自 INPUT 的“模糊”事件会触发该输入上的所有“模糊”处理程序。 然后 它会触发 FORM 上的所有“模糊”处理程序。然后它触发 LI 上的“模糊”处理程序 - 隐藏它。
除非您调用 stopPropagation,否则该事件会一直沿着 DOM 树向上延伸以防止这种情况。在您的情况下,您应该能够使用 event.target属性来查看事件是否真的起源于 LI,并且只在那种情况下隐藏它(警告:未经测试):
$('li.addnewtodo').live("blur", function(event) {
if(event.target == this)
{
$(this).hide();
}
});
希望对您有所帮助!
PS:查看blur event上的页面额外注意事项。
关于javascript - jQuery .blur() - 不要隐藏事件的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13731177/