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




3 Answers

pointer-events: none;

É uma propriedade CSS que faz com que os eventos "passem" pelo elemento ao qual ele é aplicado e faça com que o evento ocorra no elemento "abaixo".

Veja para mais detalhes: https://developer.mozilla.org/en/css/pointer-events

Não é suportado até o IE 11; todos os outros fornecedores suportam-no desde há algum tempo (o suporte global foi de ~ 92% em 12 / '16): http://caniuse.com/#feat=pointer-events (graças a @ s4y por fornecer o link nos comentários) .

hover html

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?




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>



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.




Related