0

Hoje tenho um onclick no id #menu, sempre que clico no #menu ele faz determinada ação, preciso criar uma ação que tudo que não seja #menu, faça determinada ação. Como faço isso? Existe um: !ação no javascript?

Meu código em JS é esse:

$(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')
        }
    });
});

E o 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>

2 Respostas 2

3

Acho que tem outras formas de fazer o que você está precisando, mas respondendo diretamente a sua pergunta existe sim uma maneira de fazer com que tudo que for clicado que não seja #menu chame uma função.

Ficaria dessa forma:

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

Ou:

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

Segue documentação:

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

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

1

Eu costumo colocar uma "overlay" para detetar esse tipo de cliques. Overlay é uma div que cobre a página toda (ás vezes usa-se para escurecer o fundo), e somente o menu por cima.

Outra alternativa que uso é procurar no DOM se o event.target está dentro do menu. Se não estiver sei que o clique é fora do menu. Uma flag com o estado do menu ajuda a evitar essa verificação caso o menu esteja fechado.

Como não colocas-te código vou dar um exemplo com código meu...

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/

9
  • Posso colocar aqui o código que eu tenho para o meu menu, e vc adapta essa solução ao meu código?
    – Tiago P.C
    Commented 14/05/2016 às 20:19
  • @TiagoP.C sim, coloca na pergunta.
    – Sergio
    Commented 14/05/2016 às 20:21
  • Adicionei meu JS na pergunta, já acho que é o suficiente.
    – Tiago P.C
    Commented 14/05/2016 às 20:27
  • @TiagoP.C e o HTML?
    – Sergio
    Commented 14/05/2016 às 20:47
  • pronto! @sergio
    – Tiago P.C
    Commented 14/05/2016 às 20:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .