2012-11-16 53 views
0

这里是我的代码:聚焦子元素,火灾父元素模糊

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

什么想法?

+0

什么是完整的工作流程?我知道你想要什么,但你目前的解决方案是不好的。所以需要知道所有的步骤,以便我可以完成适当的实施。 – mrtsherman

+0

我试图模仿谷歌文档/单词评论插件,所以当用户关注评论区域时,我需要将评论div移动(动画)到左边(靠近主文档)并使文本框可见,然后让他们要输入一些评论和模糊,将div(评论区域)向右移动,并使文本框再次隐藏! –

+0

同样的问题在这里http://stackoverflow.com/questions/18259754/ie-click-on-child-does-not-focus-parent-parent-has-tabindex-0 – Ouadie

回答

2

,如果这个问题已经过时不知道 - 这是也许你想干什么?: https://jsfiddle.net/1280pn4n/1/

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

我有同样的问题,并从Keltex答案帮助(使用的focusIn /事件的内容,而不是什么的onfocus /模糊):

jQuery figuring out if parent has lost 'focus'

+0

你的答案帮了我,我一直在尝试在div和ul上聚焦/模糊数小时。谢谢! – Larrydx