Как обработать клик за пределами элемента (javascript, jQuery)

Часто бывает, что нужно обработать клик вне активного элемента (блока), например когда сделан кастомный выпадающий список.

Подобная проблема бывает когда используется всплывающее (модальное) окно, но там, чаще всего, есть слой с зтемнением, клик по которому и можно обработать.

Предположим, что у нас есть элемент с классом "select_wrapper", а внутри него элементы при клике на которые ничего делать не нужно, а вот при нажатии на элементы за приделами "select_wrapper" нужно производить какое-либо действие.

HTML

 
<ul class="select_wrapper">
    <li>
        1
    </li>
    <li>
        2
    </li>
    <li>
        3
    </li>
    <li>
        4
    </li>
</ul>

Javascript

 
$(function() {
    $(document).on('click', function(event){
        let elParent = $(event.target).parent();

        if(elParent)
        {
            if(!elParent.hasClass("select_wrapper"))
            {
                console.debug("Working");
            } else {
                console.debug('Do nothing');
            }
        }
    });
});