DEV Community

cameronapak
cameronapak

Posted on

How to Click Through an Element on Web

Alt Title: How to Click Underneath an Element

What's the use-case?

I've been working on the Content Management System for YouVersion Stories. Think something like the fun and interactive Instagram stories, but with a focus on helping people seek intimacy with God every day. In the CMS, I have a preview of the story, so that the admin can see exactly what the story will look like on a device. It did almost everything that the client apps did besides one big thing: navigate between story modules with a tap.

I want to be able to navigate between story modules, while also being able to interact with some elements on the module.

An example of the construction of a web interface similar to Instagram Stories

The tap navigation works like this. Left side: go back. Middle: go forward. Right side: go forward. See the images above. This shows the tap navigation panels. In its current state, if I clicked the reflective answer button "Loving my neighbors", what would happen?

I'll give you a second to think.

It would navigate to the next module of the story, instead of selecting that answer button.

If only there was a way where I could click through that element to get to the button... CSS pointer-events are here to save the day!

How do I do it?

An image example of a situation where it seems impossible to an web element because it is covered

The layers of the story go like this: tap navigation > story module. The story module is on top of the navigation. That means it covers the entire tap navigation. On the story module, I added one simple line of CSS.

.story-module {
    pointer-events: none;
}
Enter fullscreen mode Exit fullscreen mode

That means that any mouse/touch event will go through that element to the next one underneath it. This gives us full access to the tap navigation! There's still one problem. Nested in the story module are the answer buttons that I wanted to tap, but since all mouse/touch events go to the tap navigation, clicking on an answer won't work. It'll only progress the story to the next module.

To fix this, just add back the pointer event to the buttons.

.story-module .btn-answer {
    pointer-events: auto;
}
Enter fullscreen mode Exit fullscreen mode

Here is after we've solved the situation with pointer-events CSS. The elements are now clickable.

Viola!

Now, we can easily tap the buttons when needed, and then anywhere else on the story to navigate between modules πŸ˜„

Check out Stories in the Bible app at https://bible.com/stories

Additional Resources

Top comments (0)