Onclick with Javascript denial

Navigation
0

Today I have an onclick on the id #menu , whenever I click on #menu it does a certain action, I need to create an action that everything other than #menu does a certain action. How do I do that? Is there a: !ação in javascript?

My code in JS 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>
    
asked by anonymous 14.05.2016 / 17:47

2 answers

1

I usually put an overlay to detect these types of clicks. Overlay is a div that covers the whole page (sometimes it is 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, I know the click is off the menu. A flag with menu status helps prevent this check if the menu is closed.

As you do not put your 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: link

    
14.05.2016 / 19:47
3

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

It would look like this: 

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

Or: 

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

Follow the documentation:

link

link

    
16.05.2016 / 17:15
Automatic click every 10 seconds When I click button 2 it is the time of button 1 that starts!