title: how to disable event click outside button when click button javascript
body: <p>I want when clicked button (i  used js) then event outside eg: </p>
  
  <p><code>$(document)</code> click will be disable. Unlike when click outside button then event click in button will be disable:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
          &lt;label&gt;Default select&lt;/label&gt;
          &lt;div id="test" class="btn-group bootstrap-select open" style="width: 200px"&gt;
              &lt;button class="btn dropdown-toggle btn-default" type="button" title="Alaska" onclick="test()"&gt;
                  &lt;span class="filter-option pull-left"&gt;Alaska&lt;/span&gt;&amp;nbsp;
                  &lt;span style="border: 0px !important;" class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="dropdown-menu open" style="max-height: 210.5px; overflow: hidden; min-height: 122px;"&gt;
                  &lt;ul class="dropdown-menu inner" style="max-height: 198.5px; overflow-y: auto; min-height: 110px;"&gt;                       
                      &lt;li&gt;&lt;table class="table table-hover"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;#&lt;/th&gt;
                                  &lt;th&gt;First Name&lt;/th&gt;
                                  &lt;th&gt;Last Name&lt;/th&gt;
                                  &lt;th&gt;Username&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;th scope="row"&gt;1&lt;/th&gt;
                                  &lt;td&gt;Mark&lt;/td&gt;
                                  &lt;td&gt;Otto&lt;/td&gt;
                                  &lt;td&gt;@mdo&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th scope="row"&gt;2&lt;/th&gt;
                                  &lt;td&gt;Jacob&lt;/td&gt;
                                  &lt;td&gt;Thornton&lt;/td&gt;
                                  &lt;td&gt;@fat&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th scope="row"&gt;3&lt;/th&gt;
                                  &lt;td&gt;Larry&lt;/td&gt;
                                  &lt;td&gt;the Bird&lt;/td&gt;
                                  &lt;td&gt;@twitter&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When i clicked button.</p>
  
  <pre><code>function test() {
          let x = $("#test");
          x.children().eq(1).show(200);
      }
  </code></pre>
  
  <p>I wanna event.</p>
  
  <pre><code> $(document).click(function (e) {
          let x = $("#test");
          // x.children().eq(1).hide(200);
      });
  </code></pre>
  
  <p>will be disable. And opposite</p>
  
  <p>Thanks to support</p>