Managing pointer events manually (ignore pointer events)

Tips & Tricks
1

While we are at it... :grinning: I miss a default setting that initially gives all hype elements the attribute 'Ignore all pointer events'. ONLY if I explicitly desire it, a click on an element should be enabled. How often have I been searching for elements that prevent/block a click on a button. This has already cost me a lot of time and nerves. Clicking on an element is the deliberate exception (buttons, navigation elements) and should not be the (obstructive) rule.

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
3

I‘ll give it definitely a try!

1 Like
4

Disable pointer events by default on entire Hype Document

I have created a separate thread for this question and solution to allow for its independent development without interfering with feature requests for Hype 5.

Regarding your original request, it seems that you would like to disable pointer events in general. The current approach still necessitates setting noPointerEvents on a group and therefore does not automatically cover the entire scene by default. I typically use it in this manner as it is very intentional, and I decide which branch to protect.

However, we can modify the CSS to a solution that covers all scenes by default and requires intentional unlocking of pointer events. This is the exact opposite of what Hype is currently doing. I have tested it briefly, but I would recommend conducting further tests to check for any unintended side effects.

/* Blocks pointer events for the entire HYPE document by default */
.HYPE_document * {
    pointer-events: none !important;
}

/* Optional class to disable 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;
}

The classes to use in Hype are…

noPointerEvents
(in this version optional as anyway, by default all is not clickable)

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

enablePointerEventsAll
(includes children)

2 Likes
5

Hi Max @MaxZieb
Assigning Class Names noPointerEvents/enablePointerEvents works fine!
Could those PointerEvents' ClassNames be animatable with Timeline Actions?
Let's say we want to change noPointerEvents to enablePointerEvents on the same element.

7

This solution is more permanent, relying on the regular GUI. However, you can use JavaScript to toggle elements. With Hype Reactive Content, you can define:

hypeDocument.toggleClass = function(selector, className) {
    var element = document.querySelector(selector);
    if (element) {
        if (element.classList.contains(className)) {
            element.classList.remove(className);
        } else {
            element.classList.add(className);
        }
    } else {
        console.error("No element found with the selector: " + selector);
    }
};

Consider using it in a timeline action (custom behavior when using Hype Reactive Content) such as toggleClass('.test', 'noPointerEvents'), or you could enhance it further by implementing a more specific togglePointerEvents(selector) type solution.

2 Likes