Managing pointer events manually (ignore pointer events)

Tips & Tricks
2

Disable pointer events on specific groups

You don’t necessarily need Hype to do this it’s actually basically done through CSS… give this a try.

I often use the first rule to disable pointer events. The second and third rule to enable pointer again I don’t use as much please give it a try and tell me if it works for you …

/* Disables pointer events on the element and all its children */
.HYPE_document .noPointerEvents, .HYPE_document .noPointerEvents * {
	pointer-events: none !important;
}

/* Enables pointer events on just the specific element it's applied to */
.HYPE_document .enablePointerEvents {
	pointer-events: auto !important;
}

/* Enables pointer events on the element and all its children */
.HYPE_document .enablePointerEventsAll, .HYPE_document .enablePointerEventsAll *:not(.HYPE_element_container) {
	pointer-events: auto !important;
}

Edit: I updated the CSS to work with Hype (see revisions)

The classes to use in Hype are…

noPointerEvents
Disable pointer events on a group and its children.

enablePointerEvents
(only enable pointer events on the element this is defined on)

enablePointerEventsAll
(includes children)

3 Likes