0

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?

isherwood
  • 58,414
  • 16
  • 114
  • 157
budgiebeaks
  • 159
  • 9
  • 1
    Well, [it works for me.](https://jsfiddle.net/zhykduxs/) – Sally loves Lightning Jul 15 '23 at 17:24
  • Parent link still lights up when Figure is clicked in the fiddle. – budgiebeaks Jul 15 '23 at 17:30
  • You’ll have to stop propagation with a bit of JS I think. – A Haworth Jul 15 '23 at 17:49
  • The `a` element is used to create hyperlinks and should contain only one child element. Usually, this child element is a text node that represents the clickable link text. For SEO purposes, it is essential to have meaningful and descriptive link text within the anchor element. This helps search engines understand the context and relevance of the link, potentially improving the SEO of your page. – sadeq shahmoradi Jul 19 '23 at 05:59
  • @sadeqshahmoradi I’ve never heard of an anchor element having to have only one child. Do you have a reference? – A Haworth Jul 19 '23 at 09:56
  • Why use a link if you don't want it to act like a link? – epascarello Jul 19 '23 at 20:05

2 Answers2

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.

Moseleyi
  • 2,585
  • 1
  • 24
  • 46
-1

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.

sadeq shahmoradi
  • 1,395
  • 1
  • 6
  • 22
budgiebeaks
  • 159
  • 9