停止集中，即使我不點擊外部的分區

Question

我寫了一小塊代碼，我有一個div容器，並在該div有spans和formstextboxbtns。當我點擊btn1時，容器高度增加並顯示文本框，但是當我點擊文本框div時，焦點就出來了。當我點擊btn1和它的停留焦點時，我點擊文本框（在點擊btn1並顯示黑盒之後）它不應該聚焦並且當我點擊容器站點時它應該去聚焦？我該怎麼做，請幫助我？

var tt = $.noConflict(); 
 
tt(document).ready(function($) { 
 
    $(".qta").focus(function() { 
 

 
    $(".gutt").css({ 
 
     'display': 'inline-block' 
 
    }); 
 
    $(".gutte").addClass('grandisciti'); 
 
    }); 
 

 
    $(".gutte").focusout(function() { 
 

 
    $(".gutt").css({ 
 
     'display': 'none' 
 
    }); 
 
    $(".gutte").removeClass('grandisciti'); 
 
    }); 
 
});

body { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #c1c2c3; 
 
\t } 
 
\t .gutte { 
 
\t box-sizing: border-box; 
 
\t position: relative; 
 
\t display: block; 
 
\t width: 550px; 
 
\t height: 50px; 
 
\t background-color: #fff; 
 
\t color: #000; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t margin-left: 32%; 
 
\t margin-top: 30px; 
 
\t padding-top: 2.5px; 
 
\t padding-left: 1px; 
 
\t padding-bottom: 2px; 
 
\t border-radius: 10px; 
 
\t border-radius: 10px; 
 
\t text-align: center; 
 
\t } 
 
\t .ati { 
 
\t box-sizing: border-box; 
 
\t position: static; 
 
\t display: inline-block; 
 
\t width: 105px; 
 
\t height: 45px; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t padding: 0px 10px; 
 
\t border: none; 
 
\t background-color: #ccc; 
 
\t /*border:2px solid #ccc;*/ 
 
\t border-radius: 10px; 
 
\t outline: none; 
 
\t cursor: pointer; 
 
\t transition: 0.8s all; 
 
\t font-size: 120%; 
 
\t color: #000; 
 
\t } 
 
\t .grandisciti { 
 
\t width: 600; 
 
\t height: 300px; 
 
\t -webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5); 
 
\t -moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5); 
 
\t box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5); 
 
\t } 
 
\t .gutt { 
 
\t display: none; 
 
\t width: 530px; 
 
     margin:10px; 
 
\t background-color: #000; 
 
\t } 
 
\t .tref { 
 
\t display: inline-block; 
 
\t width: 80%; 
 
\t height: 100px; 
 
\t resize: none; 
 
\t outline: none; 
 
\t padding: 10px; 
 
\t margin: 15px; 
 
\t border: 5px solid #ccc; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
body 
 
<div tabindex="1" class="gutte"> 
 
    <div class="irj fjr_p05gure rddre "> 
 
    <button class="ati qta ">btn1</button> 
 
    <button class="ati ">btn2</button> 
 
    <button class="ati ">bt3</button> 
 

 
    </div> 
 
    <span class="gutt"> 
 
\t \t \t \t <input type="text" class="tref"/> 
 
    </span> 
 

 
</div>

Answer 1

有在傳遞給事件的內容函數的事件的密切關注，尤其是目標屬性。您的gutte div可能會捕捉按鈕生成的聚焦事件。你需要加入一些條件，以便在焦點在內部移動時不會崩潰。