What is the "Pointer-Events" property for?

Asked

Viewed 1,311 times

7

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

I wonder what that’s for pointer-events with the value none, and what are the other options that can be used in this property?

css3

2 answers

5


pointer-events controls how that element will respond to user mouse events. Few options:

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

$('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>

3

pointer-events: none; prevents any action of the mouse pointer (inter) on the specified element (such as clicking, dragging, Hover, etc.). The natural value of pointer-events is auto.

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

Example:

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

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 a documentation at MDN.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.