How do you make an anchor link inside tag non-clickable or disabled?

Question

I have an anchor link that was inbuilt with a <i> tag, as I know we can disable/prevent click with different methods on the anchor tag. But my question arises can we prevent the click only for <i> which is present inside the anchor tag.

<a href='#' id='someLink'>some text <i class="disable-pointer-event">External</i></a>

Any clue? Any help will be appreciated !!

Answer 1

document.getElementById('someLink').onclick = e => {
    if(e.path.map(p => p.tagName).includes('I'))
       e.preventDefault();

 /*  OR

if(e.target.tagName ===  'I')
    e.preventDefault();
*/
}

Answer 2

You can simply get the i element out of the a tag, even though it may need you to place double a elements if the i element that you want to make it unclickable is placed in the middle. This also wouldn't affect code readability and the accessibility of the screen reader since no any of elements of this implementation violates their own principal.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<a href="#">Click on the sentences, instead of the icon </a>
<i class="fas fa-copy"></i>
<a href="#">to copy</a>

Answer 3

you can disable a link by pass javascript:void(0) into href like this

<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>

Answer 4

If the icon is just a visual clue associated with the link you could remove it from the actual HTML and add it as a pseudo element to the anchor element.

a {
  position: relative;
}

a::after {
  position: absolute;
  content: var(--icon);
  pointer-events: none;
}

<a href='#' id='someLink' style="--icon: 'External';">some text</a>