How can I disable anchor pointer events while keeping them for anchor children?

Question

I have an anchor element that has several children inside. Requirements changed and now anchor might or might not have a link on it. The easiest way to change it would be to disable click events for anchor and keep it for children (they have some functionality that depends on pointer events).

When I apply pointer-events: none to the anchor parent, everything is fine - the link doesn't work. When I then apply pointer-events: auto to anchor children, the link becomes active again.

The generated html is like so:

<a href class='no-pointer-events'>
    <figure class='pointer-events-auto'></figure>
</a>

How can I solve this?

Answer 1

From: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

If one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate.

Therefore if you set any child with pointer events, it will bubble up to the parent.

Answer 2

The following worked almost as intended:

<a href={tab.url ? tab.url : "javascript:void(0)"} >

The only problem is it shows 'javascript:void(0)' as the link, but otherwise works ok and the link is unclickable.