javascript - onmouseover - Passe os eventos do mouse através do elemento absolutamente posicionado




onmouseover function javascript (4)

A razão pela qual você não está recebendo o evento é porque o elemento absolutamente posicionado não é filho do elemento que você está querendo "clicar" (div azul). A maneira mais clara que eu posso pensar é colocar o elemento absoluto como um filho daquele que você quer que seja clicado, mas eu estou supondo que você não pode fazer isso ou você não teria postado essa pergunta aqui :)

Outra opção seria registrar um manipulador de eventos de clique para o elemento absoluto e chamar o manipulador de cliques para o div azul, fazendo com que ambos pisquem.

Devido à forma como os eventos se espalham pelo DOM, não tenho certeza se existe uma resposta mais simples para você, mas estou muito curioso para saber se alguém mais tem algum truque que eu não conheça!

https://code.i-harness.com

Eu 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 chegam ao pai, mas eu quero que ele seja "transparente" para esses eventos de mouse e os encaminhe para o que estiver por trás dele. Como devo implementar isso?


Há 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, a finalidade para a qual eu estava usando - sobrepor uma máscara ao Google Maps não capturou os eventos clique e arrastar, e o cursor do mouse não muda o que degrada a experiência do usuário o suficiente para que eu decidisse ocultar a máscara no IE e Opera os dois navegadores que não suportam eventos de ponteiro.


Se você conhece os elementos que precisam de eventos de mouse e se sua sobreposição é transparente, basta definir o z-index deles para algo maior do que a sobreposição. Todos os eventos devem, é claro, funcionar nesse caso em todos os navegadores.


Também é bom saber ...
Pointer-events podem ser desabilitados para um elemento pai (provavelmente div transparente) e ainda serem habilitados para elementos filho. Isso é útil se você trabalha com várias camadas div sobrepostas, nas quais deseja poder clicar nos elementos filho de qualquer camada. Para isso, todas as divs parentais recebem pointer-events: none e click-children obtêm eventos-ponteiro reativados por pointer-events: all

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>




javascript-events