11

Estou tentando criar um "glass pane" em JavaScript, parecido com o suportado por Java. O objetivo é oferecer uma espécie de ajuda interativa ao usuário, onde informações sobre cada elemento são sobrepostas na tela, e todos os elementos exceto aquele que está sendo explicado fica desabilitado.

Criar o glass pane é fácil - basta um elemento fixo ocupando a tela inteira. Desabilitar todos os elementos exceto um pode ser feito através das propriedades disabled e readonly, ou interceptando eventos na fase de captura. O problema está em fazer o glass pane não bloquear os elementos que estão "atrás" dele.

Para uma demonstração do problema, veja esse exemplo no jsFiddle - todos os elementos funcionam normalmente, até que o link "Ajuda" é clicado; a partir daí, tudo o que está "atrás do glass pane" pára de funcionar, uma vez que os eventos de mouse e teclado vão todos parar no glass pane. Eu gostaria que o glass pane "deixasse passar" os eventos para o que está atrás dele, assim como a versão em Java permite.

Nota: De preferência isso deve ocorrer independentemente do seu grau de trasnparência, ou mesmo de ter ou não coisas desenhadas nele (gostaria de colocar setas e coisas assim).

Workaround

Não usar um glass pane, e sim elementos individuais que não bloqueiem o elemento em foco. Exemplo. Embora não seja a solução ideal, isso e mais alguma estilização condicional do conteúdo poderia resultar em mais ou menos o que eu quero - só que de forma muito mais trabalhosa...

1 Resposta 1

6

Isso pode ser feito via CSS:

#glasspane{
    pointer-events:none;
}

Esta propriedade desabilita qualquer evento de mouse no elemento em questão, o que faz com que o elemento logo abaixo de onde você clicou receba os eventos.

Exemplo: FIDDLE

O problema é a compatibilidade com o IE, já que apenas a versão 11+ aceita esta propriedade.

Já o suporte em outros browsers é unânime:

Chrome | FF | Safari 7+ | iOS 3.2+ | Android 2.1+ via CanIUse

1
  • 1
    Perfeito! Só tive que adicionar pointer-events:all em alguns componentes individuais do glass pane (para que eu pudesse clicar no link "Próximo"), deixando o resto com none. Código final. Obrigado pela ajuda!
    – mgibsonbr
    Commented 15/06/2014 às 8:02

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 .