how to disable event click outside button when click button javascript

Question

I want when clicked button (i used js) then event outside eg:

$(document) click will be disable. Unlike when click outside button then event click in button will be disable:

<div class="form-group">
        <label>Default select</label>
        <div id="test" class="btn-group bootstrap-select open" style="width: 200px">
            <button class="btn dropdown-toggle btn-default" type="button" title="Alaska" onclick="test()">
                <span class="filter-option pull-left">Alaska</span>&nbsp;
                <span style="border: 0px !important;" class="caret"></span>
            </button>
            <div class="dropdown-menu open" style="max-height: 210.5px; overflow: hidden; min-height: 122px;">
                <ul class="dropdown-menu inner" style="max-height: 198.5px; overflow-y: auto; min-height: 110px;">                       
                    <li><table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table></li>
                </ul>
            </div>
        </div>
    </div>

When i clicked button.

function test() {
        let x = $("#test");
        x.children().eq(1).show(200);
    }

I wanna event.

 $(document).click(function (e) {
        let x = $("#test");
        // x.children().eq(1).hide(200);
    });

will be disable. And opposite

Thanks to support

Answer 1

I was find solution. Thanks interest. here my code

 $('body').bind('click', function (e) {
        let x = $("#test");
        if ($(e.target).closest("#ndungs").length == 0) {
            x.children().eq(1).hide(200);
        } 
        e.preventDefault();
        return false;
    });
    $("#test").children().eq(0).bind("click", function (e, el) {
        //debugger;
        let x = $("#test");
        x.children().eq(1).show(200);
        e.preventDefault();
        return false;
    });