Make an element click-through

Elements
1

I want to add object B on top of object A, so that when you click on A anywhere, even on the area of B that overlaps A, object A gets the click event. Is the correct way of doing this adding a function on On Scene Load that does:

hypeDocument.getElementById('B').style.pointerEvents = "none";

or does Hype override that at any point? (note it does seem to work in several browsers I’ve tried, but I want to make sure)

Is there an easier way of doing this that I don’t know of? Such as a nice toggle “make click-through” that I missed?

2

Yes – that’s the correct way. Make sure you also set Pointer Events to ‘none’ for the top Hype element in the Metrics Inspector. Here’s more info, compatibility data, and a demo:

pointerevents.zip (22.2 KB)

3

Thanks, those are some really informative links and you even wrote a quick example! Many thanks!

Just to clarify, when you say “Make sure you also set Pointer Events to ‘none’ for the top Hype element in the Metrics Inspector”, what do you mean exactly? When you say metrics inspector, I understand this thing, which does not seem to have any option for Pointer Events?

4

Oops I mispoke – it is in the ‘Actions’ inspector here:

Image%202015-05-08%20at%202.32.11%20PM.png1068×656 105 KB

5

That clears everything up then. Many thanks!

6

I would like to activate the links on images that are in a timeline. when I run the page in the browser, it remains the only active link that is in the top level. what i do?

7

Hi, Please post an example project that shows your problem and what you are trying to do.

8

Hi Mark, in the meantime i workarounds my problem
my test:
when i set in timeline my image opacity 100 > 0 to visualize another image, i set her dimension 100 > 0. in this case, the link of image, work fine.
if i don’t change dimensions of my image in top level but only set to 0 her opacity, the active link remain all time that’s in top image.
i think this is the solution
Thank you

9

Elements at the top of the layer order will always intercept mouse and touch actions. To enable clicking beneath the element, you could either change ‘pointer events’ to none, or use JavaScript. Please see this page for a demo: “Make an element Click Through”

1 Like