Как скрыть объект, нажав на кнопку или в любом месте, кроме объекта с javascript?

Question

Я сделал функцию переключения, которая открывает и скрывает элемент, нажимая на кнопку, но мне также нужно скрыть этот элемент, щелкая в любом месте, кроме себя. Я пытался сделать это, но всегда что-то не работает.

function displayOnClick(clickingObjId, displayObj) {
    let status = 1;
    document.getElementById(clickingObjId).onclick = function() {
        if(status == 1){
            document.getElementById(displayObj).style.display = 'block';
            status = 0;
        } else if (status == 0){
            document.getElementById(displayObj).style.display = 'none';
            status = 1;
        }

        return status 

    };
    document.onclick = function (e) {
        if (status !== 1 && e.target !== displayObj){ 
            document.getElementById(displayObj).style.display = 'none';
            status = 1;
        }
    }
};

Проблема в том, что когда я добавляю вторую часть кода document.onclick..., кнопка (clickObjId), которая должна открыться элемент перестает работать.

Answer 1

Здравствуйте, Neia, вот несколько примеров вашей проблемы.

Функция переключения, которая открывает и скрывает элемент, нажимая на кнопку, и скрывает это, щелкая где угодно, кроме себя ...

$(document).ready(function(){

$('#displayObject').hide();

$(document).on('click', function(e) {
    if ( $(e.target).closest('#togglerBtn').length ) {
        $("#displayObject").toggle();
    }else if ( ! $(e.target).closest('#displayObject').length ) {
        $('#displayObject').hide();
    }
});

});

#displayObject {
  position: absolute;
  top:50px;
  left:50px;
  background: #000;
  color: #fff;
  padding:30px;
}

<div id="main">
<button id="togglerBtn">Toggler</button>

<div id="content">
<div id="displayObject">
display Object
</div>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>