Question 208536 in Html Question posted in
Some basic documentation can be found here.

Html – How can I disable <a> pointer events while keeping them for <a>'s children?

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

When I apply pointer-events: none to the <a> parent, everything is fine – the link doesn’t work. When I then apply pointer-events: auto to <a> 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search