专注于子元素，在父元素上触发模糊答案

【问题标题】：Focusing on child element, fires blur on parent element专注于子元素，在父元素上触发模糊
【发布时间】：2015-07-22 07:44:33
【问题描述】：

这是我的代码：

<div tabindex="0" id="parent" style="margin-top:200px;margin-left:200px;background-color:black;height:100px;width:200px;">
    <input type="text" style="width:80px;margin:5px auto;display:none">
<div>



$("#parent").blur(function() {
     $(this).css("background-color", "blue").animate({
                marginLeft : '+=50'
            }, 400);
     $("#parent>input").css("display", "none");
   });

   $("#parent>input").focus(function() {
     $(this).css("display", "block");
   });
   $("#parent>input").blur(function() {
     $(this).css("display", "none");
   });
   $("#parent>input").keyup(function(e) {
    if (e.which === 13) {
        console.log("enter");
    }
   });

专注于输入，会在父 div 上触发模糊，并导致 div 消失，因此用户无法在文本框中输入任何文本！

http://jsfiddle.net/z7Erv/10/

有什么想法吗？

【问题讨论】：

完整的工作流程是什么？我知道你想要什么，但你目前的解决方案很糟糕。所以需要知道所有的步骤，这样我才能正确的实施。
我正在尝试模仿 google docs/word 评论插件，所以当用户关注评论区域时，我需要将评论 div 向左移动（动画）（靠近主文档）并制作文本框可见，然后让他们输入一些评论和模糊，将 div（评论区域）向右移动并使文本框再次不可见！
同样的问题stackoverflow.com/questions/18259754/…

标签： jquery focus blur

【解决方案1】：

不确定这个问题是否过时 - 这可能是您想要做的吗？： https://jsfiddle.net/1280pn4n/1/

$('#parent').bind('focusin focusout', function () {
    $(this).toggleClass('showup');
});

我刚刚遇到了同样的问题，Keltex 的回答帮助了我（使用 focusin/focusout 而不是 onfocus/blur）：

jQuery figuring out if parent has lost 'focus'

【讨论】：

您的回答帮助了我，我已经尝试聚焦/模糊 div 和 ul 几个小时了。谢谢！