According to MDN, the pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. However, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on the parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

This can be useful if you need some customization of under what conditions mouse events fire for an element.

Example

<div class="my-container">
  <div>Nope!</div>
  <div>Override!</div>
</div>
const divs = document.querySelectorAll('.my-container div');

divs.forEach(div => {
  div.addEventListener('mouseenter', function () {
    alert('mouseenter');
  });
});
.my-container {
  pointer-events: none;
  width: 100px;
}

.my-container div {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}

.my-container div:nth-of-type(2) {
  pointer-events: auto;
}

Result

Nope!
Override!