What is the pointer-events property for?


I was researching a way to style the set of <select /> and I came across a solution that used a <label> with the value pointer-events: none .

I'd like to know what pointer-events is with the none value, and what other options can be used in this property?

asked by anonymous 31.10.2017 / 20:07

2 answers


pointer-events controls how that element will respond to user mouse events. There are few options:

  • none - will cancel the entire mouse event
  • auto - restores mouse events to normal. May be useful for child elements that are inside elements with pointer-events: none
  • inherit - inherits from parent element

$('div').click(function () {
  height: 300px;
  width: 200px;
  background-color: red;
  pointer-events: none;

  height: 140px;
  width: 140px;
  background-color: blue;

  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><divclass="vovo">
  <div class="pai">
    <div class="filho">
31.10.2017 / 20:14

pointer-events: none; prevents any pointer (pointer ) action on the specified element (such as click, drag, hover, etc.). The natural value of pointer-events is auto .

Value inherit : its use is not very justified. When you specify pointer-events: none; (or auto ) to an element, all child elements already inherit this value.


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

There are other values for pointer-events , but only apply to SVG ( scalable vector graphics ):

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

For details of these specifications, you can consult documentation at MDN .

31.10.2017 / 20:21