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 >External</i></a>
Any clue? Any help will be appreciated !!
CodePudding user response：
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>
CodePudding user response：
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 ></i>
<a href="#">to copy</a>CodePudding user response：
It is not possible. Click on the inner content of the anchor element takes action on href.
As per MDN web docs for anchor element - MDN Docs
"Content within each should indicate the link's destination. If the
hrefattribute is present, pressing the enter key while focused on the<a>element will activate it."
You might have to restructure your DOM by moving <i> tag outside the anchor element.