jquery - 专注于子元素，在父元素上触发模糊

Question

这是我的代码：

<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/

任何想法？

Answer 1

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

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

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

jQuery确定父母是否失去了“焦点”