如果焦点移动到一个特定元素，我如何防止我的focusout函数启动

Question

试图弄清楚如何在点击div时使其不褪色。我只希望在点击屏幕上其他任何地方后，div都会褪色，除了实际的"testdiv"和输入字段。javascript的技能没有那么强，所以任何帮助都将不胜感激。谢谢

$(document).ready(function(){
$('.showdiv').focus(function(){
$('.testdiv').fadeIn(1000);
}).focusout(function(){
$('.testdiv').fadeOut(1000);
});
});

body {
padding: 50px
}
.showdiv {
width: 100%;
height: 30px;
padding:10px}
.testdiv{  
display:none;
margin-top:0;
width:auto;
background-color: #efefef;
padding: 20px;
font: 12px Arial, san serif;}
*:focus{
outline:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="showdiv" Placeholder="Search by Keyword"/>
<div class="testdiv">
<input type="checkbox"> Search only open source materials
</div>

下面是一个JSFiddle示例。

Answer 1

我不喜欢这个，因为它可能会让用户感到困惑，但它确实有效。如果你勾选复选框，它不会起作用。

$('.showdiv').focus(function() {
$('.testdiv').fadeIn(1000);
}).focusout(function() {
$('.testdiv').fadeOut(1000);
});
$('.testdiv input').change(function() {
$('.testdiv').stop(); // end animation on the faded element
$('.showdiv').focus(); // return focus to reinstate the focusout handler
});

演示