Estou tentando capturar eventos de mouse em um elemento com outro elemento absolutamente posicionado em cima dele.
No momento, os eventos no elemento absolutamente posicionado o atingem e borbulham até o pai, mas quero que seja "transparente" para esses eventos do mouse e encaminhe-os para o que estiver por trás dele. Como devo implementar isso?
pointer-events
existia! Posso mudar a resposta aceita para essa em algum momento.pointer-events
ainda não é super impressionante , mas está ficando melhor. Para uma opção mais compatível, vá com a resposta de @ JedSchmidt.Se tudo o que você precisa é mousedown, você pode se contentar com o
document.elementFromPoint
método:x
ey
do evento para odocument.elementFromPoint
método para obter o elemento abaixo e, em seguida,fonte
Também é bom saber ...
Eventos de ponteiro podem ser desativados para um elemento pai (provavelmente div transparente) e ainda assim serem ativados para elementos filho. Isso é útil se você trabalha com várias camadas div sobrepostas, nas quais deseja poder clicar nos elementos filhos de qualquer camada. Para isso, todas as divs parentais recebem
pointer-events: none
e os filhos clicados recebem eventos-ponteiro reativados porpointer-events: all
fonte
pointer-events:none
ea iminente let-down de ter nós filhos afetados, você salvar o dia :).parent * { pointer-events:all; }
para crianças?O motivo pelo qual você não está recebendo o evento é porque o elemento absolutamente posicionado não é filho do elemento que você deseja "clicar" (div azul). A maneira mais limpa em que consigo pensar é colocar o elemento absoluto como filho daquele em que você deseja clicar, mas presumo que você não possa fazer isso ou não teria postado essa pergunta aqui :)
Outra opção seria registrar um manipulador de eventos click para o elemento absoluto e chamar o manipulador click para a div azul, fazendo com que ambos piscassem.
Devido à forma como os eventos surgem no DOM, não tenho certeza de que haja uma resposta mais simples para você, mas estou muito curioso se alguém tiver mais truques que eu não conheço!
fonte
Existe uma versão javascript disponível que redireciona manualmente os eventos de uma div para outra.
Eu limpei e transformei em um plugin jQuery.
Aqui está o repositório do Github: https://github.com/BaronVonSmeaton/jquery.forwardevents
Infelizmente, o objetivo para o qual eu o estava usando - sobrepor uma máscara ao Google Maps não capturava eventos de clique e arraste, e o cursor do mouse não muda, o que prejudica a experiência do usuário o suficiente para que eu decidisse ocultar a máscara no IE e no Opera - os dois navegadores que não suportam eventos de ponteiro.
fonte
Se você conhece os elementos que precisam de eventos do mouse e sua sobreposição é transparente, basta definir o índice z deles para algo maior que a sobreposição. Todos os eventos devem, obviamente, funcionar nesse caso em todos os navegadores.
fonte