2

Utilizo um plugin jQuery que gera um menu lateral escondido e ao clicar no botão, o menu surge, deslocando o conteúdo do site para o lado. O problema é que os elementos do site continuam "clicáveis" e o menu não fecha automaticamente se eu clicar fora dele.

Com isso, criei o script abaixo:

$('.wrapp').on('click', function(){
    if ( ($('#sidr').is(':visible')) ) {
        $(this).click(false);
        $.sidr('close', 'sidr');
    }
});

A principio, ele deve executar quando clicado em qualquer elemento dentro da div .wrapp, fechando o menu (id #sidr) e anulando o possível click alternativo.

Apesar do menu estar fechando direitinho, ainda consigo clicar em qualquer link fora do menu.

Melhor explicação na imagem: inserir a descrição da imagem aqui

2
  • Pode criar um jsFiddle com um exemplo?
    – Sergio
    9/10/2014 às 19:08
  • Difícil, pois o menu requer scripts externos. Mas vou tentar exemplificar melhor com imagens.
    – Ricardo
    9/10/2014 às 19:09

2 Respostas 2

7

Podes, por exemplo, registar um evento de clique na página que vai cancelar o clique em determinados elementos se o teu menu estiver aberto/visível:

$("body")
    .find('a:not(#meuElementoClicavel)')
    .on("click", function(e) {
        if ($('#meuElementoClicavel').is(':visible')){
            return false;
        }
    });

Ver Exemplo no JSFiddle

No exemplo prático dá para ver que com o elemento #meuElementoClicavel visível, os links da página não funcionam.

Neste outro exemplo, o código está presente na página, mas como o elemento #meuElementoClicavel não está visível, os links funcionam normalmente.


Aplicando isto ao caso prático do teu código na pergunta:

$('.wrapp').on('click', function(){
    if ($('#sidr').is(':visible')) {
        $.sidr('close', 'sidr');
        return false;
    }
});

Embora no teu caso prático outras coisas podem influenciar o correto funcionamento da ação de "cancelar" o clique...

3
  • Já tinha tentado por return false e não adiantou. Vou testar a segunda opção sua, mas o problema é que preciso anular qualquer clic no site, desde links até inputs e tals.
    – Ricardo
    9/10/2014 às 19:34
  • De forma a cancelar o clique em todos os elementos menos o elemento X, podes usar: $("body > *").not("#meuElementoClicavel").on("click", function(e) { ...}); Ver exemplo no JSFiddle.
    – Zuul
    9/10/2014 às 19:37
  • Testei deixando somente o return false e funcionou!! Porém, eu preciso executar a função de fechar o menu, então eu coloquei $.sidr('close', 'sidr'); antes do returne não funcionou mais. Se eu colocar o return false antes, também não funciona.
    – Ricardo
    9/10/2014 às 19:48
3

Se .wrapp for uma overlay sobre os objetos clicáveis, substitua: $(this).click(false); por: event.stopPropagation();

$('.wrapp').on('click', function(event){
    if ( ($('#sidr').is(':visible')) ) {
        event.stopPropagation();
        $.sidr('close', 'sidr');
    }
});

Mas se os objetos clicáveis estão dentro de .wrapp use o: event.preventDefault();

$('.wrapp').on('click', function(event){
    if ( ($('#sidr').is(':visible')) ) {
        event.preventDefault();
        $.sidr('close', 'sidr');
    }
});
5
  • Não deu, os links continuam executando.
    – Ricardo
    9/10/2014 às 19:32
  • @Ricardo então o .wrapp não esta exatamente como um overlay... 9/10/2014 às 19:34
  • Eu posso estar colocando o elemento errado. Eu coloquei a classe .wrapp pois ela é a classe das divs dos conteúdos, dentro de cada bloco há links, textos, etc.
    – Ricardo
    9/10/2014 às 19:37
  • @Ricardo fiz uma edição na resposta, e fique atento ao parâmetro event na function: function(event){ 9/10/2014 às 19:40
  • O event.preventDefault(); também não funcionou. :(
    – Ricardo
    9/10/2014 às 19:46

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 .