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...