Parent element highlighted when child is clicked on mobile

My mobile-only web app has some <div> elements that should be highlighted when clicked/long clicked, and was hoping to achieve this with CSS only.

It's important to note that this is a legacy app with very complex code that is meant for low-end devices, so lists, for example, are not rendered using <ul>'s and <li>'s, but everything is a <div>.

I noticed a CSS (maybe intentional?) side effect -

When an element and its direct child both have the following CSS applied to them:

div {
  pointer-events: auto;
  cursor: pointer;
}

Then clicking/long-clicking on the child element will always highlight the parent element only.

This means that if, for example, a small <div> lives inside of a larger <div> and the child is clicked, the larger parent <div> is highlighted.

I know that I can use Javascript to solve this issue, but this app is meant for low-end devices so I prefer to avoid adding more Javascript code.

This feels like an undesired side-effect and I couldn't find any documentation about this behavior.