onClick with overlapping meshes

Questions
1

I have a canvas that features a rotating carousel of card meshes. Each card has an onClick function that navigates to a unique URL. The navigation works, but the problem that I’m running into is that since the cards are 3d, if there’s any overlap and there’s a card directly behind the one that I click at the point that I click on it, it ends up going to the url of the card at the back instead of the one in the front. So to go to the url of any card in the front, I have to actively check to make sure that there’s no card directly behind the space where I click. Is there any way to avoid this behavior for overlapping 3d elements?

Here’s what the carousel looks like for reference:

Capture2.PNG
Capture2.PNG1469×662 58.1 KB

2

event.stopPropagation is most likely what you’re looking for:

<Card
  onClick={(event) => {
    event.stopPropagation(); // NOTE Stop the event from going any further than this handler
    event.preventDefault(); // NOTE Optional, in case there's some default behaviour assigned to the element that you'd like to not happen

    // NOTE Rest of your code
  }}
/>
1 Like
3

What framework is generating your onClick events?

4

event.stopPropogation was exactly what I was looking for!

1 Like