Onclick with Javascript denial

Question

Today I have an onclick in id #menu, every time I click on #menu he makes certain action, I need to create an action that everything is not #menu, do certain action. How do I do this? There is a: !ação in javascript?

My JS code is this:

$(document).ready(function() {
    $("#head header .menu").on('click', function() {
        if ($(this).hasClass('active')) {
            $('#menus').css({
                "top": "-120px"
            });
            $('#menus').css({
                "left": "-50%"
            });
            $(this).removeClass('active')
        } else {
            $('#menus').css({
                "top": "0"
            });
            $('#menus').css({
                "left": "0"
            });
            $(this).addClass('active')
        }
    });
});

And the HTML:

<icon class="menu"></icon>
    <ul>
    <div id="menus">
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
    </ul>
</div>

Answer 1

I think there are other ways to do what you need to do, but by directly answering your question there is a way to get everything that is not clicked #menu to call a function.

Would that way:

$(document).not("#menu").on("click", function(){
     alert("Não é menu");
});

Or:

$(document).on("click", ":not(#menu)", function(){
     alert("Não é menu");
});

Follows documentation:

http://www.w3schools.com/jquery/sel_not.asp

http://www.w3schools.com/jquery/traversing_not.asp

Answer 2

I usually put an "overlay" to detect this type of clicks. Overlay is a div that covers the entire page (sometimes used to darken the background), and only the menu above.

Another alternative I use is to look in the DOM if the event.target is inside the menu. If not know that the click is outside the menu. A menu status flag helps prevent this check if the menu is closed.

Since you didn’t code, I’ll give you an example with my code...

function getClosest(el, selector) {
    while (el && !el.matches(selector)) {
        el = el.parentElement;
    }
    return el;
}

var menu = document.getElementById('menu');
var button = document.querySelector('button');
var aberto = false;

button.addEventListener('click', function(e) {
e.stopPropagation();
    aberto = menu.classList.toggle('aberto');
});

window.addEventListener('click', function(e) {
    var dentroMenu = aberto && getClosest(e.target, '#menu');
    if (aberto && !dentroMenu) {
        // aqui corre o código quando o clique fôr fora do menu
        aberto = menu.classList.toggle('aberto');
    }
});

#menu {
    margin-left: -200px;
    transition: margin-left 1s;
    border: 2px solid #88f;
    background-color: #ddf;
    border-radius: 20px;
    width: 220px;
}

#menu.aberto {
    margin-left: 0px;
}

button {
	margin-top: 50px;
	padding: 10px;
}

<div id="menu">
    <ul>
        <li>Alfa</li>
        <li>Beta</li>
        <li>Gama</li>
    </ul>
</div>
<button type="button">Toggle menu</button>

jsFiddle: https://jsfiddle.net/xxp4by23/