title: Focusout when click on outside of div container
body: <p>I have a small piece of code and i wanted to know that how can I do when I click on outside <code>div class="gutte"</code> and this div should be go focusout. I snippet my code down and this is not focusout when I click on outside of <code>div class="gutte"</code> (or <code>&lt;body&gt;</code> ) and i cannot use <code>input type[text]</code>. When I click on btn1 <code>div class="gutte"</code> focus but one I click on another part (in input type text) it goes focusout.. How could I do this ? I am using jQuery framework.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
     width: 100%;
     height: 100%;
     background-color: #c1c2c3;
   }
   .gutte {
     box-sizing: border-box;
     position: relative;
     display: block;
     width: 550px;
     height: 50px;
     background-color: #fff;
     color: #000;
     margin: 0px;
     padding: 0px;
     margin-left: 32%;
     margin-top: 30px;
     padding-top: 2.5px;
     padding-left: 1px;
     padding-bottom: 2px;
     border-radius: 10px;
     border-radius: 10px;
     text-align: center;
   }
   .ati {
     box-sizing: border-box;
     position: static;
     display: inline-block;
     width: 105px;
     height: 45px;
     margin: 0px;
     padding: 0px;
     padding: 0px 10px;
     border: none;
     background-color: #ccc;
     /*border:2px solid #ccc;*/
     border-radius: 10px;
     outline: none;
     cursor: pointer;
     transition: 0.8s all;
     font-size: 120%;
     color: #000;
   }
   .grandisciti {
     width: 600;
     height: 300px;
     -webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
     box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
   }
   .gutt {
     display: none;
     width: 530px;
        margin:10px;
     background-color: #000;
   }
   .tref {
     display: inline-block;
     width: 80%;
     height: 100px;
     resize: none;
     outline: none;
     padding: 10px;
     margin: 15px;
     border: 5px solid #ccc;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  body
  &lt;div tabindex="1" class="gutte"&gt;
    &lt;div  class="irj fjr_p05gure rddre "&gt;
      &lt;button class="ati qta "&gt;btn1&lt;/button&gt;
      &lt;button class="ati "&gt;btn2&lt;/button&gt;
      &lt;button class="ati "&gt;bt3&lt;/button&gt;
  
    &lt;/div&gt;
    &lt;span class="gutt"&gt;
      &lt;input type="text" class="tref"/&gt;
    &lt;/span&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>