Pointer events utilities Since v1.1.0+

Halfmoon comes with utility classes which can be used to set the pointer-events property of elements.

Classes #

The following table shows the available classes for setting the pointer-events property:

Class Description
.pointer-events-auto Sets the pointer-events: auto property
.pointer-events-none Sets the pointer-events: none property

The above classes work in the following ways:

  • The .pointer-events-auto class reverts the element to the default browser behavior for pointer events, such as clicks.
  • The .pointer-events-none class makes the element ignore pointer events altogether. The events trigger on child elements by passing through the target.

You can see a common use case for these utilities in the example below: preventing the second logo image from being draggable or selectable (using .pointer-events-none).

normal image image not draggable
<!-- Pointer events auto (default, so class is redundant here) -->
<img src="..." class="img-fluid pointer-events-auto" alt="...">

<!-- Pointer events none (image not draggable or selectable) -->
<img src="..." class="img-fluid pointer-events-none" alt="...">