9

Estava pesquisando uma maneira de estilizar a setinha do <select /> e me deparei com uma solução que usava uma <label> com o valor pointer-events: none.

Eu gostaria de saber para que serve esse pointer-events com o valor none, e quais são as outras opções que podem ser usadas nessa propriedade?

4

2 Respostas 2

6

pointer-events controla como aquele elemento responderá aos eventos do mouse do usuário. São poucas opções:

  • none - cancelará todo o evento de mouse
  • auto - restaura os eventos do mouse para o normal. Pode ser útil para elementos filho que estão dentro de elementos com o pointer-events: none
  • inherit - herda do elemento pai

$('div').click(function () {
  alert('teste');
  event.stopPropagation();
});
.vovo{
  height: 300px;
  width: 200px;
  background-color: red;
  pointer-events: none;
}

.pai{
  height: 140px;
  width: 140px;
  background-color: blue;
}

.filho{
  height: 70px;
  width: 70px;
  background-color: green;
  pointer-events: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vovo">
  <div class="pai">
    <div class="filho">
    </div>
  </div>
</div>

4

pointer-events: none; previne que qualquer ação do ponteiro do mouse (pointer) sobre o elemento especificado (como clicar, arrastar, hover etc..). O valor natural de pointer-events é auto.

Valor inherit: não justifica-se muito seu uso. Quando você especifica pointer-events: none; (ou auto) a um elemento, todos os elementos-filhos já herdam tal valor.

Exemplo:

<div style="pointer-events: none;">

   <!-- não fez sentido usar inherit no elemento abaixo,
   já que ele herda automaticamente o none da div-pai -->

   <a href="" style="pointer-events: inherit;">Link</a>
   <br />
   <p>Texto</p>
</div>

Existem outros valores para pointer-events, mas só aplicam-se a SVG (gráficos vetoriais escaláveis):

  • visiblePainted
  • visibleFill
  • visibleStroke
  • visible
  • painted
  • fill
  • stroke
  • all

Para detalhes dessas especificações, você pode consultar uma documentação no MDN.

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 .