如何使标签中的锚链接不可点击或禁用

Question

我有一个内置<i>标记的锚链接，因为我知道我们可以在锚标记上使用不同的方法禁用/阻止点击。但我的问题出现了，我们是否可以阻止仅针对锚标记内的<i>的单击。

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

有线索吗？任何帮助都将不胜感激！！

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

如果图标只是与链接相关联的视觉线索，则可以将其从实际HTML中删除，并将其作为伪元素添加到锚点元素中。

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

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

Answer 3

您可以通过将javascript:void(0)传递到类似的href来禁用链接

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

Answer 4

您可以简单地从a标记中取出i元素，即使如果要使其不可抓取的i元素被放置在在中间，它可能需要放置两个a元素。这也不会影响代码的可读性和屏幕阅读器的可访问性，因为这个实现中没有任何元素违反它们自己的原则。

<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>